/* ============================================================
   KNVF Design Tokens — Material Design 3 기반
   Navy #002B5B / Red #D0021B / White #FFFFFF
   ============================================================ */

:root {
  /* ── Brand Colors ── */
  --knvf-navy: #002B5B;
  --knvf-navy-light: #1A4A7A;
  --knvf-navy-dark: #001B3D;
  --knvf-red: #D0021B;
  --knvf-red-light: #E8334A;
  --knvf-red-dark: #A00116;
  --knvf-white: #FFFFFF;
  --knvf-gold: #FFD600;

  /* ── MD3 Semantic Colors ── */
  --md-sys-color-primary: var(--knvf-navy);
  --md-sys-color-on-primary: var(--knvf-white);
  --md-sys-color-primary-container: #D4E3FF;
  --md-sys-color-on-primary-container: #001B3D;
  --md-sys-color-secondary: var(--knvf-red);
  --md-sys-color-on-secondary: var(--knvf-white);
  --md-sys-color-secondary-container: #FFE0E0;
  --md-sys-color-on-secondary-container: #410002;
  --md-sys-color-surface: #FAFAFA;
  --md-sys-color-on-surface: #1C1B1F;
  --md-sys-color-surface-variant: #F4F4F4;
  --md-sys-color-on-surface-variant: #49454F;
  --md-sys-color-outline: #79747E;
  --md-sys-color-outline-variant: #CAC4D0;
  --md-sys-color-background: var(--knvf-white);
  --md-sys-color-on-background: #1C1B1F;
  --md-sys-color-error: #B3261E;
  --md-sys-color-on-error: var(--knvf-white);
  --md-sys-color-success: #198754;
  --md-sys-color-on-success: var(--knvf-white);

  /* ── Typography Scale (Noto Sans KR) ── */
  --md-sys-typescale-display-large: 700 3.5rem/1.15 'Noto Sans KR', sans-serif;
  --md-sys-typescale-display-medium: 700 2.8rem/1.2 'Noto Sans KR', sans-serif;
  --md-sys-typescale-display-small: 600 2.25rem/1.25 'Noto Sans KR', sans-serif;
  --md-sys-typescale-headline-large: 600 2rem/1.3 'Noto Sans KR', sans-serif;
  --md-sys-typescale-headline-medium: 600 1.75rem/1.3 'Noto Sans KR', sans-serif;
  --md-sys-typescale-headline-small: 600 1.5rem/1.35 'Noto Sans KR', sans-serif;
  --md-sys-typescale-title-large: 500 1.375rem/1.35 'Noto Sans KR', sans-serif;
  --md-sys-typescale-title-medium: 500 1rem/1.5 'Noto Sans KR', sans-serif;
  --md-sys-typescale-title-small: 500 0.875rem/1.5 'Noto Sans KR', sans-serif;
  --md-sys-typescale-body-large: 400 1rem/1.6 'Noto Sans KR', sans-serif;
  --md-sys-typescale-body-medium: 400 0.875rem/1.5 'Noto Sans KR', sans-serif;
  --md-sys-typescale-body-small: 400 0.75rem/1.5 'Noto Sans KR', sans-serif;
  --md-sys-typescale-label-large: 500 0.875rem/1.4 'Noto Sans KR', sans-serif;
  --md-sys-typescale-label-medium: 500 0.75rem/1.4 'Noto Sans KR', sans-serif;
  --md-sys-typescale-label-small: 500 0.6875rem/1.4 'Noto Sans KR', sans-serif;

  /* ── Elevation (box-shadow) ── */
  --md-sys-elevation-0: none;
  --md-sys-elevation-1: 0 1px 2px rgba(0,0,0,0.1), 0 1px 3px rgba(0,0,0,0.08);
  --md-sys-elevation-2: 0 1px 2px rgba(0,0,0,0.1), 0 2px 6px rgba(0,0,0,0.1);
  --md-sys-elevation-3: 0 1px 3px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.12);
  --md-sys-elevation-4: 0 2px 4px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.12);
  --md-sys-elevation-5: 0 4px 8px rgba(0,0,0,0.1), 0 12px 24px rgba(0,0,0,0.14);

  /* ── Shape (border-radius) ── */
  --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;

  /* ── Motion ── */
  --md-sys-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --md-sys-motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --md-sys-motion-easing-decelerate: cubic-bezier(0, 0, 0, 1);
  --md-sys-motion-easing-accelerate: cubic-bezier(0.3, 0, 1, 1);
  --md-sys-motion-duration-short: 150ms;
  --md-sys-motion-duration-medium: 300ms;
  --md-sys-motion-duration-long: 500ms;

  /* ── Spacing Scale ── */
  --space-2xs: 2px;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;

  /* ── Layout ── */
  --max-width: 1200px;
  --header-height: 72px;
  --header-height-mobile: 60px;

  /* ── Z-index ── */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-header: 1000;
  --z-overlay: 1500;
  --z-modal: 2000;
}

/* Breakpoints (for reference, used in media queries):
   --bp-mobile: 360px
   --bp-tablet: 768px
   --bp-desktop: 1024px
   --bp-wide: 1440px
*/