:root {
  /* Primitive colors */
  --sc-color-navy-700: #2b4782;
  --sc-color-navy-900: #17355f;
  --sc-color-blue-50: #eef4ff;
  --sc-color-blue-100: #dceaff;
  --sc-color-blue-500: #1267e8;
  --sc-color-blue-600: #0057d6;
  --sc-color-blue-700: #0047b8;
  --sc-color-orange-50: #fff3d6;
  --sc-color-orange-500: #f2950e;
  --sc-color-orange-600: #d97d00;
  --sc-color-slate-50: #f6f8fb;
  --sc-color-slate-100: #f3f6fb;
  --sc-color-slate-200: #dce3ed;
  --sc-color-slate-500: #687181;
  --sc-color-slate-600: #4f5968;
  --sc-color-slate-900: #15181e;
  --sc-color-white: #ffffff;
  --sc-color-black: #000000;
  --sc-color-success: #197a55;
  --sc-color-danger: #c81e2e;
  --sc-color-overlay-hero: rgba(246, 248, 251, 0.72);
  --sc-color-overlay-media: rgba(23, 53, 95, 0.72);
  --sc-color-overlay-header: rgba(255, 255, 255, 0.98);

  /* Semantic colors */
  --sc-text-strong: var(--sc-color-slate-900);
  --sc-text-body: var(--sc-color-slate-600);
  --sc-text-muted: var(--sc-color-slate-500);
  --sc-text-inverse: var(--sc-color-white);
  --sc-text-inverse-muted: rgba(255, 255, 255, 0.76);
  --sc-text-inverse-faint: rgba(255, 255, 255, 0.58);
  --sc-text-link: var(--sc-color-blue-500);
  --sc-surface-default: var(--sc-color-white);
  --sc-surface-subtle: var(--sc-color-slate-50);
  --sc-surface-brand: var(--sc-color-blue-50);
  --sc-surface-warm: var(--sc-color-orange-50);
  --sc-surface-inverse: var(--sc-color-navy-700);
  --sc-surface-footer: var(--sc-color-navy-900);
  --sc-action-primary: var(--sc-color-blue-500);
  --sc-action-primary-hover: var(--sc-color-blue-600);
  --sc-action-primary-pressed: var(--sc-color-blue-700);
  --sc-action-accent: var(--sc-color-orange-500);
  --sc-action-accent-hover: var(--sc-color-orange-600);
  --sc-border-default: var(--sc-color-slate-200);
  --sc-border-strong: var(--sc-color-slate-500);
  --sc-border-focus: var(--sc-color-blue-500);
  --sc-border-inverse: rgba(255, 255, 255, 0.2);
  --sc-surface-glass: rgba(255, 255, 255, 0.96);

  /* Typography */
  --sc-font-sans: "Noto Sans KR", Arial, sans-serif;
  --sc-font-weight-regular: 400;
  --sc-font-weight-medium: 500;
  --sc-font-weight-bold: 700;
  --sc-font-weight-extra-bold: 800;
  --sc-font-size-100: 12px;
  --sc-font-size-200: 14px;
  --sc-font-size-300: 16px;
  --sc-font-size-400: 18px;
  --sc-font-size-500: 22px;
  --sc-font-size-600: 28px;
  --sc-font-size-700: 40px;
  --sc-font-size-800: 56px;
  --sc-line-height-tight: 1.18;
  --sc-line-height-heading: 1.28;
  --sc-line-height-body: 1.7;

  /* 4px spacing scale */
  --sc-space-0: 0px;
  --sc-space-1: 4px;
  --sc-space-2: 8px;
  --sc-space-3: 12px;
  --sc-space-4: 16px;
  --sc-space-5: 20px;
  --sc-space-6: 24px;
  --sc-space-8: 32px;
  --sc-space-10: 40px;
  --sc-space-12: 48px;
  --sc-space-16: 64px;
  --sc-space-20: 80px;
  --sc-space-26: 104px;
  --sc-space-32: 128px;

  /* Shape and elevation */
  --sc-radius-xs: 4px;
  --sc-radius-sm: 8px;
  --sc-radius-md: 12px;
  --sc-radius-lg: 16px;
  --sc-radius-pill: 999px;
  --sc-shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.06);
  --sc-shadow-md: 0 6px 24px -8px rgba(11, 19, 34, 0.16);
  --sc-shadow-floating: 0 14px 36px -10px rgba(11, 19, 34, 0.22);
  --sc-shadow-action: 0 7px 18px rgba(18, 103, 232, 0.24);
  --sc-shadow-action-hover: 0 10px 24px rgba(18, 103, 232, 0.3);
  --sc-shadow-accent: 0 7px 18px rgba(242, 149, 14, 0.22);

  /* Layout */
  --sc-container-max: 1200px;
  --sc-gutter: 40px;
  --sc-section-space: 104px;
  --sc-grid-gap: 24px;
  --sc-header-height: 88px;

  /* Components */
  --sc-button-height: 48px;
  --sc-button-radius: var(--sc-radius-sm);
  --sc-button-padding-inline: var(--sc-space-5);
  --sc-input-height: 52px;
  --sc-input-radius: var(--sc-radius-sm);
  --sc-card-radius: var(--sc-radius-sm);
  --sc-card-padding: var(--sc-space-6);
  --sc-card-shadow: var(--sc-shadow-sm);
  --sc-icon-button-size: 44px;
  --sc-focus-ring: 0 0 0 3px rgba(18, 103, 232, 0.22);

  /* Motion */
  --sc-duration-fast: 160ms;
  --sc-duration-base: 240ms;
  --sc-duration-slow: 360ms;
  --sc-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --sc-ease-exit: cubic-bezier(0.4, 0, 1, 1);

  /* v2 class compatibility. Values still resolve to v3 semantic tokens. */
  --sc-navy: var(--sc-surface-inverse);
  --sc-navy-deep: var(--sc-surface-footer);
  --sc-blue: var(--sc-action-primary);
  --sc-blue-light: var(--sc-surface-brand);
  --sc-cyan: var(--sc-action-primary);
  --sc-orange: var(--sc-action-accent);
  --sc-orange-soft: var(--sc-surface-warm);
  --sc-ink: var(--sc-text-strong);
  --sc-copy: var(--sc-text-body);
  --sc-line: var(--sc-border-default);
  --sc-soft: var(--sc-surface-subtle);
  --sc-program-bg: var(--sc-surface-brand);
  --sc-white: var(--sc-surface-default);
  --sc-footer: var(--sc-surface-footer);
  --sc-shadow: var(--sc-shadow-md);
  --sc-shadow-soft: var(--sc-shadow-sm);
}

@media (max-width: 1024px) {
  :root {
    --sc-gutter: 32px;
    --sc-section-space: 80px;
    --sc-font-size-800: 48px;
  }
}

@media (max-width: 768px) {
  :root {
    --sc-gutter: 18px;
    --sc-section-space: 64px;
    --sc-grid-gap: 16px;
    --sc-header-height: 72px;
    --sc-font-size-700: 32px;
    --sc-font-size-800: 36px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --sc-duration-fast: 1ms;
    --sc-duration-base: 1ms;
    --sc-duration-slow: 1ms;
  }
}