/* KAIA tokens.css — DS §2 전량. 재사용: 서브 6p는 이 파일을 첫 번째로 로드하고 값을 수정하지 않는다.
   Layer 1(primitive) 직접 참조 금지 — 컴포넌트는 Layer 3, 없으면 Layer 2만 참조.
   라이트 톤 섹션은 요소에 data-theme="light"를 붙여 §2.2 오버라이드를 국소 적용한다. */

/* ═══ Layer 1 — Primitive (테마 무관) ═══════════════════════════ */
:root {
  --ink-950: #06090F;
  --ink-900: #0A0F1A;
  --ink-850: #0E1522;
  --ink-800: #121B2B;
  --ink-700: #1B2739;
  --ink-650: #22304A;
  --ink-600: #2A3949;
  --ink-500: #47586C;
  --ink-450: #55667B;
  --ink-400: #6B7C91;
  --ink-350: #7C8DA2;
  --ink-300: #93A3B8;
  --ink-200: #C0CBD9;
  --ink-100: #E2E8F0;
  --ink-050: #F4F7FA;
  --ink-000: #FFFFFF;

  --blue-800: #0F3FA8;
  --blue-700: #1450D0;
  --blue-600: #1F5AE0;
  --blue-500: #2B6BF0;
  --blue-400: #5C90F7;
  --blue-300: #8FB4FA;
  --blue-200: #C3D8FD;

  --cyan-700: #155E75;
  --cyan-600: #0E7490;
  --cyan-500: #06B6D4;
  --cyan-400: #22D3EE;
  --cyan-300: #67E8F9;

  --green-400: #4ADE80;
  --amber-400: #FBBF24;
  /* 라이트 서피스용 상태색 — 400단계는 흰 배경에서 1.7:1 라 본문으로 못 쓴다 */
  --green-700: #15803D;
  --amber-700: #B45309;
  --red-500:   #DC2626;
  --red-600:   #B91C1C;
  --red-300:   #FF7A7A;

  --alpha-ink-90: rgba(10, 15, 26, 0.90);
  --alpha-ink-72: rgba(10, 15, 26, 0.72);
  --alpha-ink-40: rgba(10, 15, 26, 0.40);
  --alpha-white-08: rgba(255, 255, 255, 0.08);
  --alpha-white-04: rgba(255, 255, 255, 0.04);
  --alpha-cyan-32:  rgba(34, 211, 238, 0.32);
  --alpha-cyan-16:  rgba(34, 211, 238, 0.16);
  --alpha-blue-24:  rgba(43, 107, 240, 0.24);
}

/* ═══ Layer 2 — Semantic · DARK = 기본 ══════════════════════════ */
:root,
[data-theme="dark"] {
  color-scheme: dark;

  --color-bg-base:        var(--ink-900);
  --color-bg-sunken:      var(--ink-850);
  --color-surface:        var(--ink-800);
  --color-surface-raised: var(--ink-700);
  --color-surface-scrim:  var(--alpha-ink-72);
  --color-surface-glass:  var(--alpha-white-04);

  --color-text-primary:     var(--ink-100);
  --color-text-secondary:   var(--ink-300);
  --color-text-placeholder: var(--ink-350);
  --color-text-disabled:    var(--ink-400);
  --color-text-on-brand:    var(--ink-000);
  --color-text-on-accent:   var(--ink-950);
  --color-text-link:        var(--blue-400);
  --color-text-link-hover:  var(--blue-300);
  --color-text-accent:      var(--cyan-400);

  --color-brand:           var(--blue-600);
  --color-brand-hover:     var(--blue-500);
  --color-brand-active:    var(--blue-700);
  --color-brand-quiet:     var(--blue-800);
  --color-accent:          var(--cyan-400);
  --color-accent-hover:    var(--cyan-300);
  --color-accent-active:   var(--cyan-500);

  --color-border-subtle:      var(--ink-600);
  --color-border-interactive: var(--ink-400);
  --color-border-strong:      var(--ink-350);
  --color-border-brand:       var(--blue-500);

  --color-success: var(--green-400);
  --color-warning: var(--amber-400);
  --color-danger:  var(--red-300);
  --color-danger-bg: var(--red-500);
  --color-danger-bg-active: var(--red-600);
  --color-text-on-status: var(--ink-950);

  --color-focus-ring: var(--cyan-300);
  --color-focus-gap:  var(--color-bg-base);

  --color-glow-accent: var(--alpha-cyan-32);
  --gradient-brand: linear-gradient(112deg, var(--blue-600) 0%, var(--cyan-500) 100%);
  /* 텍스트가 올라가는 브랜드 서피스 전용. --gradient-brand 의 cyan-500 끝단은 흰 텍스트가
     2.45:1 이라 본문을 얹을 수 없다(장식 전용). 이 변형은 전 구간 흰 텍스트 6.8:1 이상. */
  --gradient-brand-deep: linear-gradient(112deg, var(--blue-700) 0%, var(--cyan-700) 100%);
  --gradient-hero-veil: radial-gradient(120% 90% at 50% 0%,
      rgba(43,107,240,0.22) 0%, rgba(10,15,26,0) 62%);
  --gradient-fade-bottom: linear-gradient(180deg,
      rgba(10,15,26,0) 0%, var(--ink-900) 88%);
}

/* ═══ Layer 2 — LIGHT 오버라이드 (섹션·페이지 단위 적용) ════════ */
[data-theme="light"] {
  color-scheme: light;

  --color-bg-base:        var(--ink-000);
  --color-bg-sunken:      var(--ink-050);
  --color-surface:        var(--ink-000);
  --color-surface-raised: var(--ink-050);
  --color-surface-scrim:  rgba(255, 255, 255, 0.82);
  --color-surface-glass:  rgba(10, 15, 26, 0.04);

  --color-text-primary:     var(--ink-850);
  --color-text-secondary:   var(--ink-500);
  --color-text-placeholder: var(--ink-450);
  --color-text-disabled:    var(--ink-350);
  --color-text-on-brand:    var(--ink-000);
  --color-text-on-accent:   var(--ink-000);
  --color-text-link:        var(--blue-700);
  --color-text-link-hover:  var(--blue-800);
  --color-text-accent:      var(--cyan-600);

  --color-brand:        var(--blue-700);
  --color-brand-hover:  var(--blue-600);
  --color-brand-active: var(--blue-800);
  --color-accent:       var(--cyan-600);
  --color-accent-hover: var(--cyan-700);
  --color-accent-active: var(--cyan-700);

  --color-border-subtle:      var(--ink-200);
  --color-border-interactive: var(--ink-400);
  --color-border-strong:      var(--ink-500);
  --color-border-brand:       var(--blue-700);

  /* 상태색은 라이트 서피스에서 반드시 재정의 — 누락 시 다크값(green-400 등)이 흰 배경에 남는다.
     --color-text-on-status 도 함께 뒤집어야 뱃지(상태색 배경 + 라벨)가 무너지지 않는다. */
  --color-success: var(--green-700);
  --color-warning: var(--amber-700);
  --color-text-on-status: var(--ink-000);
  --color-danger:  var(--red-600);
  --color-focus-ring: var(--blue-700);
  --color-focus-gap:  var(--color-bg-base);

  --color-glow-accent: rgba(14, 116, 144, 0.20);
  --gradient-hero-veil: radial-gradient(120% 90% at 50% 0%,
      rgba(31,90,224,0.10) 0%, rgba(255,255,255,0) 62%);
  --gradient-fade-bottom: linear-gradient(180deg,
      rgba(255,255,255,0) 0%, var(--ink-000) 88%);

  /* DS §2.6 라이트 그림자 오버라이드 */
  --shadow-sm: 0 1px 2px rgba(14,21,34,0.06);
  --shadow-md: 0 4px 12px rgba(14,21,34,0.09);
  --shadow-lg: 0 12px 32px rgba(14,21,34,0.12);
  --shadow-xl: 0 24px 64px rgba(14,21,34,0.16);
  --shadow-glow: 0 0 0 1px rgba(14,116,144,0.24),
                 0 8px 32px var(--color-glow-accent);
}

/* ═══ Layer 3 — Component ═══════════════════════════════════════
   테마 셀렉터를 함께 둔다 — var()는 "선언된 요소"에서 치환되므로, :root 에만 두면
   Layer 2 를 참조하는 값이 다크 값으로 굳어 [data-theme="light"] 섹션에서 갱신되지 않는다. */
:root,
[data-theme="dark"],
[data-theme="light"] {
  --btn-height-lg: 3.25rem;
  --btn-height-md: 2.75rem;
  --btn-height-sm: 2.25rem;
  --btn-padding-x-lg: var(--space-7);
  --btn-padding-x-md: var(--space-6);
  --btn-padding-x-sm: var(--space-4);
  --btn-radius: var(--radius-md);
  --btn-font-weight: 600;

  --card-bg:            var(--color-surface);
  --card-bg-hover:      var(--color-surface-raised);
  --card-border:        1px solid var(--color-border-subtle);
  --card-radius:        var(--radius-lg);
  --card-padding:       var(--space-7);
  --card-padding-compact: var(--space-5);
  --card-shadow:        var(--shadow-sm);
  --card-shadow-hover:  var(--shadow-lg);
  --card-lift:          -4px;

  --field-height:       var(--btn-height-md);
  --field-bg:           var(--color-bg-sunken);
  --field-border:       1px solid var(--color-border-interactive);
  --field-border-focus: 1px solid var(--color-border-brand);
  --field-radius:       var(--radius-sm);
  --field-padding-x:    var(--space-4);

  --gnb-height:         4.5rem;
  --gnb-height-mobile:  3.5rem;
  --gnb-bg-solid:       var(--alpha-ink-90);
  --gnb-blur:           12px;
  --gnb-border:         1px solid var(--color-border-subtle);

  --focus-ring: 0 0 0 2px var(--color-focus-gap),
                0 0 0 4px var(--color-focus-ring);

  /* 8pt 그리드에 없는 확정 수치 — 리터럴 px 금지(DS P6) 때문에 토큰으로 승격 */
  --grid-gap-md:   1.25rem;  /* 20px — IA 태블릿 거터 */
  --scroll-offset: 5.5rem;   /* 88px — sticky 헤더 회피 (WCAG 2.4.11) */
  --hit-expand:    -4px;     /* 시각 크기 < 44px 컨트롤의 ::after 히트영역 확장 */
  --glow-size:     40rem;    /* 640px — S07 시안 글로우 원 */
  --util-height:   2.25rem;  /* 36px — GNB 유틸바 (데스크톱 전용) */
}

/* ═══ 타이포그래피 (DS §2.4) ════════════════════════════════════ */
:root {
  --font-sans: "Pretendard Variable", Pretendard, -apple-system,
               BlinkMacSystemFont, "Apple SD Gothic Neo", "Segoe UI",
               "Noto Sans KR", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular,
               "SF Mono", Menlo, Consolas, monospace;

  --text-display: clamp(2.75rem, 1.40rem + 6.00vw, 6.00rem);
  --text-h1:      clamp(2.25rem, 1.42rem + 3.70vw, 4.25rem);
  --text-h2:      clamp(1.75rem, 1.28rem + 2.09vw, 2.88rem);
  --text-h3:      clamp(1.375rem, 1.09rem + 1.30vw, 2.06rem);
  --text-h4:      clamp(1.125rem, 0.97rem + 0.69vw, 1.50rem);
  --text-lead:    clamp(1.063rem, 0.94rem + 0.56vw, 1.375rem);
  --text-body:    clamp(1.00rem, 0.96rem + 0.19vw, 1.125rem);
  --text-sm:      0.9375rem;
  --text-xs:      0.8125rem;
  --text-counter: clamp(2.75rem, 1.63rem + 5.00vw, 5.50rem);

  --leading-tight:   1.15;
  --leading-snug:    1.28;
  --leading-normal:  1.7;
  --leading-relaxed: 1.85;

  --tracking-display: -0.025em;
  --tracking-heading: -0.012em;
  --tracking-normal:  0;
  --tracking-wide:    0.06em;

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold: 600;
  --weight-bold:    700;

  --measure-narrow: 32ch;
  --measure-base:   62ch;
  --measure-wide:   78ch;
}

/* ═══ 스페이싱 · 레이아웃 (DS §2.5) ═════════════════════════════ */
:root {
  --space-0:  0;
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  2.5rem;
  --space-8:  3rem;
  --space-9:  4rem;
  --space-10: 5rem;
  --space-11: 6rem;
  --space-12: 8rem;

  --section-py:      clamp(4rem, 2.5rem + 6.5vw, 8rem);
  --section-py-hero: clamp(6rem, 3.0rem + 12vw, 11rem);
  --section-gap:     clamp(2rem, 1.4rem + 2.6vw, 4rem);

  --container-max:   75rem;
  --container-wide:  87.5rem;
  --container-text:  45rem;
  --gutter:          clamp(1.25rem, 0.75rem + 2.2vw, 2.5rem);
  --grid-columns:    12;
  --grid-columns-md: 8;
  --grid-columns-sm: 4;

  /* 브레이크포인트 — 참조용(미디어쿼리는 리터럴 값 사용, CSS 사양 제약) */
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
  --bp-2xl: 1536px;
}

/* ═══ 반경 · 그림자 · z-index (DS §2.6) ═════════════════════════ */
:root {
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-2xl:  32px;
  --radius-full: 999px;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.40),
               inset 0 1px 0 var(--alpha-white-04);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.45),
               inset 0 1px 0 var(--alpha-white-04);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.55),
               inset 0 1px 0 var(--alpha-white-08);
  --shadow-xl: 0 24px 64px rgba(0,0,0,0.62),
               inset 0 1px 0 var(--alpha-white-08);
  --shadow-glow: 0 0 0 1px var(--alpha-cyan-16),
                 0 8px 32px var(--color-glow-accent);
  --shadow-none: none;

  --z-below:    -1;
  --z-base:      0;
  --z-raised:    10;
  --z-sticky:    100;
  --z-gnb:       200;
  --z-dropdown:  300;
  --z-overlay:   800;
  --z-modal:     900;
  --z-toast:     1000;
  --z-skiplink:  1100;
}

/* ═══ 모션 토큰 (DS §2.7) ═══════════════════════════════════════ */
:root {
  --duration-instant: 80ms;
  --duration-fast:    140ms;
  --duration-base:    220ms;
  --duration-slow:    360ms;
  --duration-slower:  560ms;
  --duration-cinema:  900ms;

  --ease-linear:   linear;
  --ease-standard: cubic-bezier(0.20, 0.00, 0.00, 1.00);
  --ease-out:      cubic-bezier(0.16, 1.00, 0.30, 1.00);
  --ease-in:       cubic-bezier(0.70, 0.00, 0.84, 0.00);
  --ease-inout:    cubic-bezier(0.65, 0.00, 0.35, 1.00);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1.00);

  --stagger-tight:  40ms;
  --stagger-base:   70ms;
  --stagger-loose: 110ms;

  --shift-xs:  4px;
  --shift-sm:  8px;
  --shift-md: 16px;
  --shift-lg: 32px;
  --shift-xl: 64px;
}

/* 전역 감쇠 — OS 설정 또는 사이트 모션 토글(html[data-motion="reduced"]) */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-instant: 1ms; --duration-fast: 1ms; --duration-base: 1ms;
    --duration-slow: 1ms; --duration-slower: 1ms; --duration-cinema: 1ms;
    --stagger-tight: 0ms; --stagger-base: 0ms; --stagger-loose: 0ms;
    --shift-xs: 0; --shift-sm: 0; --shift-md: 0; --shift-lg: 0; --shift-xl: 0;
  }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}

html[data-motion="reduced"] {
  --duration-instant: 1ms; --duration-fast: 1ms; --duration-base: 1ms;
  --duration-slow: 1ms; --duration-slower: 1ms; --duration-cinema: 1ms;
  --stagger-tight: 0ms; --stagger-base: 0ms; --stagger-loose: 0ms;
  --shift-xs: 0; --shift-sm: 0; --shift-md: 0; --shift-lg: 0; --shift-xl: 0;
}
html[data-motion="reduced"] *,
html[data-motion="reduced"] *::before,
html[data-motion="reduced"] *::after {
  animation-duration: 1ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 1ms !important;
  scroll-behavior: auto !important;
}