/* ============================================================
   Material 3 Design System — Colors & Type
   Source: vibe_blueprint DesignSystem_M3 css/tokens
   Modified: Pretendard CDN 로드, 구글 블루 오버라이드 별도 파일
   ============================================================ */

/* 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 {
  /* ---------- PRIMARY (M3 기본 — 구글 블루로 오버라이드됨) ---------- */
  --md-sys-color-primary: rgb(103, 80, 164);
  --md-sys-color-on-primary: rgb(255, 255, 255);
  --md-sys-color-primary-container: rgb(234, 221, 255);
  --md-sys-color-on-primary-container: rgb(79, 55, 138);

  /* ---------- SECONDARY ---------- */
  --md-sys-color-secondary: rgb(98, 91, 113);
  --md-sys-color-on-secondary: rgb(255, 255, 255);
  --md-sys-color-secondary-container: rgb(232, 222, 248);
  --md-sys-color-on-secondary-container: rgb(74, 68, 89);

  /* ---------- TERTIARY ---------- */
  --md-sys-color-tertiary: rgb(125, 82, 96);
  --md-sys-color-on-tertiary: rgb(255, 255, 255);
  --md-sys-color-tertiary-container: rgb(255, 216, 228);
  --md-sys-color-on-tertiary-container: rgb(99, 59, 72);

  /* ---------- ERROR ---------- */
  --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);

  /* ---------- SURFACE / BACKGROUND ---------- */
  --md-sys-color-background: rgb(254, 247, 255);
  --md-sys-color-on-background: rgb(29, 27, 32);
  --md-sys-color-surface: rgb(254, 247, 255);
  --md-sys-color-on-surface: rgb(29, 27, 32);
  --md-sys-color-surface-variant: rgb(230, 224, 233);
  --md-sys-color-on-surface-variant: rgb(73, 69, 79);

  /* Surface tonal containers */
  --md-sys-color-surface-dim: rgb(222, 216, 225);
  --md-sys-color-surface-bright: rgb(254, 247, 255);
  --md-sys-color-surface-container-lowest: rgb(255, 255, 255);
  --md-sys-color-surface-container-low: rgb(247, 242, 250);
  --md-sys-color-surface-container: rgb(243, 237, 247);
  --md-sys-color-surface-container-high: rgb(236, 230, 240);
  --md-sys-color-surface-container-highest: rgb(230, 224, 233);

  /* Outlines */
  --md-sys-color-outline: rgb(121, 116, 126);
  --md-sys-color-outline-variant: rgb(202, 196, 208);

  /* Inverse */
  --md-sys-color-inverse-surface: rgb(50, 47, 53);
  --md-sys-color-inverse-on-surface: rgb(245, 239, 247);
  --md-sys-color-inverse-primary: rgb(208, 188, 255);

  /* Scrim & shadow */
  --md-sys-color-scrim: rgb(0, 0, 0);
  --md-sys-color-shadow: rgb(0, 0, 0);

  /* ---------- TYPESCALE ---------- */
  --md-sys-typescale-font-brand: 'Pretendard Variable', 'Pretendard', system-ui, sans-serif;
  --md-sys-typescale-font-plain: 'Pretendard Variable', 'Pretendard', system-ui, sans-serif;
  --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;
}