/* ==========================================================================
   tokens.css — 디자인 토큰 (Scheme A: 밝은 미드블루 + 딥 네이비 + 샴페인 골드)
   Primary #0E76BC / Secondary #0A2540 / Accent #C9A86A
   ========================================================================== */

:root {
  /* ── Color · Primary (Scheme A / 밝은 미드블루 #0E76BC) ──────────── */
  --color-primary-50:  #E8F2FB;
  --color-primary-100: #CBE1F4;
  --color-primary-200: #99C4E9;
  --color-primary-300: #66A6DD;
  --color-primary-400: #3388D1;
  --color-primary-500: #0E76BC;  /* Base · CTA · 링크 */
  --color-primary-600: #0C64A0;  /* Hover */
  --color-primary-700: #0A5284;  /* Active */
  --color-primary-800: #083F67;
  --color-primary-900: #052B47;
  --color-primary-950: #02182B;

  /* ── Color · Secondary (딥 네이비 — 신뢰 보조) ──────────────────── */
  --color-secondary:      #0A2540;  /* 푸터·다크 섹션 기본 */
  --color-secondary-soft: #11355A;
  --color-secondary-deep: #061A2E;

  /* ── Color · Accent (Scheme A / 샴페인 골드 #C9A86A) ────────────── */
  --color-accent-50:   #FBF5E7;
  --color-accent-100:  #F5E7C2;
  --color-accent-200:  #EFE3C9;  /* soft — 배경 틴트 */
  --color-accent-300:  #E4CC8F;
  --color-accent-400:  #D5B87B;
  --color-accent-500:  #C9A86A;  /* Base · 포인트 */
  --color-accent-600:  #B8945A;  /* Hover */
  --color-accent-700:  #9C7A43;
  --color-accent-800:  #7C5F32;

  /* ── Color · Neutral ─────────────────────────────────────────────── */
  --color-neutral-0:   #FFFFFF;
  --color-neutral-50:  #F8FAFC;
  --color-neutral-100: #F1F5F9;
  --color-neutral-200: #E2E8F0;
  --color-neutral-300: #CBD5E1;
  --color-neutral-400: #94A3B8;
  --color-neutral-500: #64748B;
  --color-neutral-600: #475569;
  --color-neutral-700: #334155;
  --color-neutral-800: #1E293B;
  --color-neutral-900: #0F172A;
  --color-neutral-950: #020617;

  /* ── Color · Semantic (레드 배제) ───────────────────────────────── */
  --color-success: #16A34A;
  --color-warning: #F59E0B;
  --color-error:   #B45309; /* 레드 대신 딥 앰버 */
  --color-info:    var(--color-primary-500);

  /* ── Color · Alias ──────────────────────────────────────────────── */
  --color-text:        var(--color-neutral-900);
  --color-text-muted:  var(--color-neutral-600);
  --color-text-subtle: var(--color-neutral-500);
  --color-text-invert: var(--color-neutral-0);

  --color-bg:          var(--color-neutral-0);
  --color-bg-alt:      var(--color-neutral-50);
  --color-bg-tint:     var(--color-primary-50);   /* 연한 브랜드 틴트 */
  --color-bg-dark:     var(--color-secondary);    /* 딥 네이비 */
  --color-bg-deepest:  var(--color-secondary-deep);

  --color-border:        var(--color-neutral-200);
  --color-border-strong: var(--color-neutral-300);
  --color-border-brand:  var(--color-primary-200);

  --color-link:       var(--color-primary-500);
  --color-link-hover: var(--color-primary-700);

  /* 버튼/강조 전용 alias (컴포넌트 CSS에서 참조) */
  --color-cta:        var(--color-primary-500);
  --color-cta-hover:  var(--color-primary-600);
  --color-cta-active: var(--color-primary-700);
  --color-on-cta:     var(--color-white);
  --color-on-accent:  #1A1410;

  /* ── Color · Pure white/black (토큰화) ──────────────────────────── */
  --color-white: #FFFFFF;
  --color-black: #000000;

  /* ── 다크 배경 위 흰색 오버레이 단계 ───────────────────────────── */
  --surface-white-03: rgba(255, 255, 255, 0.03);
  --surface-white-04: rgba(255, 255, 255, 0.04);
  --surface-white-06: rgba(255, 255, 255, 0.06);
  --surface-white-08: rgba(255, 255, 255, 0.08);
  --surface-white-10: rgba(255, 255, 255, 0.10);
  --surface-white-12: rgba(255, 255, 255, 0.12);
  --surface-white-15: rgba(255, 255, 255, 0.15);
  --surface-white-30: rgba(255, 255, 255, 0.30);
  --surface-white-50: rgba(255, 255, 255, 0.50);
  --surface-white-70: rgba(255, 255, 255, 0.70);
  --surface-white-80: rgba(255, 255, 255, 0.80);

  /* 다크 배경 위 텍스트 */
  --text-on-dark:       var(--color-white);
  --text-on-dark-soft:  rgba(255, 255, 255, 0.85);
  --text-on-dark-muted: rgba(255, 255, 255, 0.70);

  /* ── 브랜드 링/글로우 (color-mix 기반, 알파 포함) ─────────────── */
  --ring-primary:      0 0 0 3px color-mix(in srgb, var(--color-primary-500) 18%, transparent);
  --ring-accent:       0 0 0 3px color-mix(in srgb, var(--color-accent-500) 22%, transparent);
  --glow-accent-soft:  color-mix(in srgb, var(--color-accent-500) 18%, transparent);
  --glow-primary-soft: color-mix(in srgb, var(--color-primary-600) 28%, transparent);

  /* ── Typography ─────────────────────────────────────────────────── */
  --font-sans: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont,
               system-ui, 'Malgun Gothic', '맑은 고딕', 'Apple SD Gothic Neo',
               'Helvetica Neue', Arial, sans-serif;
  --font-display: 'Pretendard Variable', Pretendard, system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, 'JetBrains Mono', Consolas, monospace;

  /* 크기 scale (~1.25 ratio) */
  --text-xs:   0.75rem;    /* 12 */
  --text-sm:   0.875rem;   /* 14 */
  --text-base: 1rem;       /* 16 */
  --text-lg:   1.125rem;   /* 18 */
  --text-xl:   1.25rem;    /* 20 */
  --text-2xl:  1.5rem;     /* 24 */
  --text-3xl:  1.875rem;   /* 30 */
  --text-4xl:  2.25rem;    /* 36 */
  --text-5xl:  3rem;       /* 48 */
  --text-6xl:  3.75rem;    /* 60 */
  --text-7xl:  4.5rem;     /* 72 */

  --leading-tight:   1.2;
  --leading-snug:    1.375;
  --leading-normal:  1.5;
  --leading-relaxed: 1.625;
  --leading-loose:   1.8;

  --tracking-tighter: -0.04em;
  --tracking-tight:   -0.02em;
  --tracking-normal:  -0.01em;
  --tracking-wide:    0.02em;

  --font-regular:  400;
  --font-medium:   500;
  --font-semibold: 600;
  --font-bold:     700;
  --font-black:    900;

  /* ── Spacing (4px base) ─────────────────────────────────────────── */
  --space-0:  0;
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-7:  1.75rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  --section-py:         10rem;
  --section-py-mobile:  var(--space-24);

  /* ── Radii ──────────────────────────────────────────────────────── */
  --radius-none: 0;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  /* ── Shadow ─────────────────────────────────────────────────────── */
  --shadow-xs:  0 1px 2px 0 rgb(15 23 42 / 0.05);
  --shadow-sm:  0 1px 3px 0 rgb(15 23 42 / 0.08), 0 1px 2px -1px rgb(15 23 42 / 0.06);
  --shadow-md:  0 4px 6px -1px rgb(15 23 42 / 0.08), 0 2px 4px -2px rgb(15 23 42 / 0.06);
  --shadow-lg:  0 10px 15px -3px rgb(15 23 42 / 0.10), 0 4px 6px -4px rgb(15 23 42 / 0.08);
  --shadow-xl:  0 20px 25px -5px rgb(15 23 42 / 0.12), 0 8px 10px -6px rgb(15 23 42 / 0.08);
  --shadow-2xl: 0 25px 50px -12px rgb(15 23 42 / 0.20);
  --shadow-inner: inset 0 2px 4px 0 rgb(15 23 42 / 0.06);

  /* ── Container ──────────────────────────────────────────────────── */
  --container-sm:  640px;
  --container-md:  768px;
  --container-lg:  1024px;
  --container-xl:  1200px;
  --container-2xl: 1600px;
  --container-px-mobile:  var(--space-5);
  --container-px-desktop: var(--space-8);

  /* ── Motion ─────────────────────────────────────────────────────── */
  --ease-linear: linear;
  --ease-in:     cubic-bezier(0.4, 0, 1, 1);
  --ease-out:    cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-fast:   150ms;
  --duration-normal: 250ms;
  --duration-slow:   400ms;
  --duration-slower: 600ms;

  /* ── Z-index ────────────────────────────────────────────────────── */
  --z-base:     0;
  --z-raised:   10;
  --z-dropdown: 50;
  --z-sticky:   100;
  --z-header:   200;
  --z-modal:    500;
  --z-toast:    1000;
}

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