/* Hallmark · design-system: design.md · 택스쿡 공통 토큰
 * theme: custom · vibe: "토스식 투톤 — 밝은 블루가 움직이고, 네이비가 받친다"
 * paper: oklch(99.4% 0.001 240) · accent: oklch(61% 0.2 259) · navy: oklch(36% 0.13 263)
 * display: Pretendard 700–800 · body: Pretendard 400 · outlier: JetBrains Mono
 * axes: light / geometric-sans / cool(259°) · 개정 2026-09-04
 */
:root {
  /* 색 — 투톤: 블루=행동, 네이비=정체성. 뉴트럴은 쿨그레이 */
  --color-paper:       oklch(99.4% 0.001 240);
  --color-paper-2:     oklch(98.4% 0.002 240);
  --color-paper-3:     oklch(96.3% 0.004 240);
  --color-ink:         oklch(24% 0.015 255);
  --color-ink-2:       oklch(35% 0.02 255);
  --color-muted:       oklch(48% 0.02 250);
  --color-muted-2:     oklch(62% 0.016 248);
  --color-rule:        oklch(92.5% 0.005 240);
  --color-rule-2:      oklch(95.5% 0.003 240);
  --color-accent:      oklch(61% 0.2 259);       /* 토스 블루류 #3182f6 */
  --color-accent-2:    oklch(55% 0.21 259);      /* hover 단계 */
  --color-accent-soft: oklch(95.5% 0.023 255);   /* 블루 틴트 서피스 */
  --color-accent-ink:  oklch(99% 0.002 240);
  --color-navy:        oklch(36% 0.13 263);      /* 브랜드 네이비 #10367d */
  --color-deep:        oklch(25% 0.05 263);      /* 다크 섹션 서피스 */
  --color-deep-2:      oklch(30% 0.055 263);
  --color-deep-ink:    oklch(94% 0.008 262);
  --color-deep-muted:  oklch(72% 0.02 262);
  --color-focus:       oklch(61% 0.2 259);

  /* 히어로 슬라이드 무드 틴트 — 저채도(≤0.04) 파스텔만 */
  --color-slide-blue:  oklch(96% 0.02 250);
  --color-slide-mint:  oklch(96.5% 0.025 190);
  --color-slide-warm:  oklch(96.5% 0.025 80);
  --color-slide-gray:  oklch(96.5% 0.008 262);
  --color-hero-dark:   oklch(14% 0.03 262);    /* 브랜드 다크 슬라이드 베이스(이미지 가독 오버레이) */
  --color-hero-dark-muted: oklch(78% 0.02 262);

  /* 절차 카드 그라데이션 — 흰색·실버 뉴트럴(홀짝은 방향만 반전) */
  --color-card-white:  oklch(99.5% 0.001 240);
  --color-card-silver: oklch(88% 0.004 250);
  --color-card-accent-1: oklch(61% 0.2 259);    /* 홀수 카드 강조(블루) */
  --color-card-accent-2: oklch(50% 0.12 200);   /* 짝수 카드 강조(틸) */

  /* 폰트 — 단일 패밀리 + 숫자 아웃라이어 */
  --font-display: "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", sans-serif;
  --font-body:    "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", sans-serif;
  --font-num:     "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;

  /* 타입 스케일 — 1.25 (한글 자폭 고려한 display 상한) */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-md:   1.1875rem;
  --text-lg:   1.4375rem;
  --text-xl:   1.75rem;
  --text-2xl:  2.1875rem;
  --text-display-s: clamp(1.55rem, 1.8vw + 0.7rem, 2.05rem);
  --text-display:   clamp(1.9rem, 2vw + 1rem, 2.8rem);

  /* 간격 — 4pt 스케일 */
  --space-3xs: 0.125rem;
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 9rem;

  /* 모션 */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms;
  --dur-short: 220ms;
  --dur-long:  420ms;
  --dur-slide: 1000ms;   /* 히어로 장면 전환(블러 페이드) 시간 */
  --hero-h: clamp(30rem, 82vh, 44rem);   /* 히어로 슬라이드 높이(브랜드 이미지 마스크 계산에도 사용) */

  /* 선·모서리·z — 토스식 라운드 */
  --rule-hair:    1px;
  --rule-thick:   2px;
  --radius-btn:   14px;
  --radius-input: 12px;
  --radius-card:  20px;
  --radius-pill:  999px;
  --shadow-card:  0 6px 24px oklch(24% 0.015 255 / 0.07);
  --shadow-pill:  0 2px 10px oklch(24% 0.015 255 / 0.12);
  --z-base: 1; --z-raised: 10; --z-dropdown: 100;
  --z-sticky: 200; --z-modal: 400; --z-toast: 500; --z-tooltip: 600;
}