/* ============================================================
   Material 3 Design System — Type / Shape / Elevation / Motion
   Source: vibe_blueprint DesignSystem_M3 css/tokens

   ⚠️ 색(--md-sys-color-*)은 이 파일에 두지 않는다 — 정본은 m3-google-blue.css 1곳.
      2026-07-29 이전엔 여기에도 30개가 '다른 값으로' 중복 정의돼 있었고, 로드 순서상
      m3-google-blue 가 전부 덮어써서 이 파일 값은 한 번도 렌더된 적이 없었다(死 정의).
      제거해도 최종 계산값 동일 — 두 파일은 항상 m3-tokens → m3-google-blue 순으로 함께 로드된다
      (layouts/application, layouts/embed_modal 2곳 전부).
      색을 바꾸려면 m3-google-blue.css 를, 브랜드 색이면 db_tokens.css 를 고친다.
   ============================================================ */

/* Pretendard — CDN Variable */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css');
/* Roboto Mono — monospace */
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;700&display=swap');
/* Material Symbols — 아이콘 */
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0');

:root {
  /* ---------- 색: m3-google-blue.css 가 정본. 여기엔 그 파일에 없는 잔여분만 ---------- */
  --md-sys-color-error: rgb(179, 38, 30);
  --md-sys-color-on-error: rgb(255, 255, 255);
  --md-sys-color-error-container: rgb(249, 222, 220);
  --md-sys-color-on-error-container: rgb(133, 34, 33);
  --md-sys-color-scrim: rgb(0, 0, 0);
  --md-sys-color-shadow: rgb(0, 0, 0);

  /* ---------- TYPESCALE ---------- */
  /* sans 폰트 정본 = db_tokens.css --db-font-sans 1곳 — 여기선 참조만(2026-07-28 단일화, 값 동일) */
  --md-sys-typescale-font-brand: var(--db-font-sans);
  --md-sys-typescale-font-plain: var(--db-font-sans);
  --md-sys-typescale-font-mono: 'Roboto Mono', ui-monospace, monospace;

  /* Display */
  --md-sys-typescale-display-large:   400 57px/64px var(--md-sys-typescale-font-brand);
  --md-sys-typescale-display-medium:  400 45px/52px var(--md-sys-typescale-font-brand);
  --md-sys-typescale-display-small:   400 36px/44px var(--md-sys-typescale-font-brand);
  /* Headline */
  --md-sys-typescale-headline-large:  400 32px/40px var(--md-sys-typescale-font-brand);
  --md-sys-typescale-headline-medium: 400 28px/36px var(--md-sys-typescale-font-brand);
  --md-sys-typescale-headline-small:  400 24px/32px var(--md-sys-typescale-font-brand);
  /* Title */
  --md-sys-typescale-title-large:     400 22px/28px var(--md-sys-typescale-font-brand);
  --md-sys-typescale-title-medium:    500 16px/24px var(--md-sys-typescale-font-plain);
  --md-sys-typescale-title-small:     500 14px/20px var(--md-sys-typescale-font-plain);
  /* Body */
  --md-sys-typescale-body-large:      400 16px/24px var(--md-sys-typescale-font-plain);
  --md-sys-typescale-body-medium:     400 14px/20px var(--md-sys-typescale-font-plain);
  --md-sys-typescale-body-small:      400 12px/16px var(--md-sys-typescale-font-plain);
  /* Label */
  --md-sys-typescale-label-large:     500 14px/20px var(--md-sys-typescale-font-plain);
  --md-sys-typescale-label-medium:    500 12px/16px var(--md-sys-typescale-font-plain);
  --md-sys-typescale-label-small:     500 11px/16px var(--md-sys-typescale-font-plain);

  /* Letter spacing */
  --md-sys-typescale-display-large-tracking: -0.25px;
  --md-sys-typescale-title-medium-tracking: 0.15px;
  --md-sys-typescale-title-small-tracking: 0.1px;
  --md-sys-typescale-body-medium-tracking: 0.25px;
  --md-sys-typescale-label-large-tracking: 0.1px;
  --md-sys-typescale-label-small-tracking: 0.5px;

  /* ---------- SHAPE ---------- */
  --md-sys-shape-none: 0;
  --md-sys-shape-xs: 4px;
  --md-sys-shape-sm: 8px;
  --md-sys-shape-md: 12px;
  --md-sys-shape-lg: 16px;
  --md-sys-shape-xl: 28px;
  --md-sys-shape-full: 9999px;

  /* ---------- ELEVATION ---------- */
  --md-sys-elevation-0: none;
  --md-sys-elevation-1: 0 1px 2px 0 rgba(0,0,0,0.30), 0 1px 3px 1px rgba(0,0,0,0.15);
  --md-sys-elevation-2: 0 1px 2px 0 rgba(0,0,0,0.30), 0 2px 6px 2px rgba(0,0,0,0.15);
  --md-sys-elevation-3: 0 1px 3px 0 rgba(0,0,0,0.30), 0 4px 8px 3px rgba(0,0,0,0.15);
  --md-sys-elevation-4: 0 2px 3px 0 rgba(0,0,0,0.30), 0 6px 10px 4px rgba(0,0,0,0.15);
  --md-sys-elevation-5: 0 4px 4px 0 rgba(0,0,0,0.30), 0 8px 12px 6px rgba(0,0,0,0.15);

  /* ---------- SPACING (4dp grid) ---------- */
  --md-sys-spacing-1: 4px;
  --md-sys-spacing-2: 8px;
  --md-sys-spacing-3: 12px;
  --md-sys-spacing-4: 16px;
  --md-sys-spacing-5: 20px;
  --md-sys-spacing-6: 24px;
  --md-sys-spacing-8: 32px;
  --md-sys-spacing-10: 40px;
  --md-sys-spacing-12: 48px;
  --md-sys-spacing-16: 64px;

  /* ---------- STATE LAYER ---------- */
  --md-sys-state-hover: 0.08;
  --md-sys-state-focus: 0.10;
  --md-sys-state-pressed: 0.10;
  --md-sys-state-dragged: 0.16;

  /* ---------- MOTION ---------- */
  --md-sys-motion-standard: cubic-bezier(0.2, 0, 0, 1);
  --md-sys-motion-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --md-sys-motion-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
  --md-sys-motion-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15);
  --md-sys-motion-short: 200ms;
  --md-sys-motion-medium: 300ms;
  --md-sys-motion-long: 500ms;
}