/* ==========================================================
   tokens.css
   KADO Skin — KADO DS v1.0+v1.1 정합. 색상/타이포/스페이싱/라운드/그림자 토큰. 색이나 폰트 크기를 바꾸려면 여기서.
   Last sync: 2026-05-02 · Source: KADO-Showcase.html
   ========================================================== */

:root {
  /* === Color scales === */
  --gray-0:#FFFFFF; --gray-25:#FCFCFD; --gray-50:#F9FAFB; --gray-100:#F2F3F5;
  --gray-200:#E8EAEC; --gray-300:#D6D8DC; --gray-400:#A8ABB1; --gray-500:#7C8089;
  --gray-600:#585C64; --gray-700:#3E4148; --gray-800:#272A2F; --gray-900:#15171B; --gray-950:#0A0B0E;
  --mystic-50:#ECFFF1; --mystic-100:#D2FFDD; --mystic-200:#A4FFB9; --mystic-300:#6BFF86;
  --mystic-400:#3FF064; --mystic-500:#1FD950; --mystic-600:#14B441; --mystic-700:#0E8A33;
  --mystic-800:#0A6128; --mystic-900:#073D1A; --mystic-950:#03210E;
  --legendary-500:#F5C518; --legendary-300:#FCD34D; --legendary-700:#A47608;
  --epic-500:#8B5CF6; --epic-300:#A78BFA;
  --rare-500:#EF4444;
  --common-500:#3B82F6;
  --success-500:#2DB36F; --success-700:#15803D;
  --warning-500:#C7A615;
  --danger-300:#FCA5A5; --danger-500:#E85A47; --danger-600:#DC2626; --danger-700:#B91C1C;
  --info-500:#2598D6;

  /* alpha */
  --gray-a50: rgba(15,17,22,0.02); --gray-a100: rgba(15,17,22,0.04);
  --gray-a200: rgba(15,17,22,0.06); --gray-a300: rgba(15,17,22,0.10);
  --gray-a400: rgba(15,17,22,0.18); --gray-a500: rgba(15,17,22,0.32);
  --gray-a600: rgba(15,17,22,0.52); --gray-a700: rgba(15,17,22,0.68);
  --white-a100: rgba(255,255,255,0.06); --white-a200: rgba(255,255,255,0.12);
  --white-a300: rgba(255,255,255,0.18); --white-a600: rgba(255,255,255,0.52);

  /* === System tokens (Light) === */
  --fg-base: var(--gray-950);
  --fg-subtle: var(--gray-700);
  --fg-muted: var(--gray-500);
  --fg-faint: var(--gray-400);
  --fg-onbrand: var(--mystic-950);

  --bg-base: var(--gray-0);
  --bg-subtle: var(--gray-50);
  --bg-muted: var(--gray-100);
  --bg-card: var(--gray-0);
  --bg-elevated: var(--gray-0);

  --border-subtle: var(--gray-100);
  --border-base: var(--gray-200);
  --border-strong: var(--gray-300);
  --border-focus: var(--mystic-500);

  /* Action — Primary (KREAM black) */
  --action-primary-bg: var(--gray-950);
  --action-primary-bg-hover: var(--gray-800);
  --action-primary-fg: var(--gray-0);

  /* Action — Brand (mystic neon) */
  --action-brand-bg: var(--mystic-300);
  --action-brand-bg-hover: var(--mystic-200);
  --action-brand-fg: var(--mystic-950);

  /* Action — Secondary */
  --action-secondary-bg: var(--gray-0);
  --action-secondary-bg-hover: var(--gray-50);
  --action-secondary-fg: var(--gray-950);
  --action-secondary-border: var(--gray-300);
  --action-secondary-border-hover: var(--gray-950);

  /* Action — Tertiary */
  --action-tertiary-bg-hover: var(--gray-100);
  --action-tertiary-fg: var(--gray-700);
  --action-tertiary-fg-hover: var(--gray-950);

  /* === Typography ===
     단일 폰트 패밀리: Pretendard (mono 의존 제거 — DS P-02 가격 mono 규칙 사용 안 함)
     사이즈 스케일: KADO DS v1.0 §3.2 4단 Heading + 4단 Body + 5단 Caption 정합 */
  --font-sans: 'Pretendard Variable','Pretendard',-apple-system,BlinkMacSystemFont,system-ui,'Segoe UI',sans-serif;
  --fw-rg: 400; --fw-md: 500; --fw-bd: 600; --fw-bk: 700;

  /* Heading (DS h1~h4) */
  --fs-h1: 32px;          /* DS h1 */
  --fs-h2: 26px;          /* DS h2 */
  --fs-h3: 22px;          /* DS h3 */
  --fs-h4: 18px;          /* DS h4 */
  /* Body (DS body-lg~xs) */
  --fs-body-lg: 18px;
  --fs-body-md: 16px;
  --fs-body-sm: 14px;
  --fs-body-xs: 13px;
  /* Caption (DS caption-lg~xxs) */
  --fs-caption-lg: 13px;
  --fs-caption-md: 12px;
  --fs-caption-sm: 11px;
  --fs-caption-xs: 10px;
  --fs-caption-xxs: 8px;

  /* 호환 별칭 — 기존 시범 페이지에서 사용한 이름들이 spec 프리셋으로 매핑되도록 */
  --fs-display: var(--fs-h1);
  --fs-headline: var(--fs-h2);    /* 20→26 (spec 정합) */
  --fs-title: var(--fs-h4);       /* 16→18 (spec 정합) */
  --fs-body: var(--fs-body-sm);   /* 본문은 콤팩트 14 유지 */
  --fs-caption: var(--fs-caption-md);  /* 12 (caption-md alias) */

  --lh-heading: 1.25;
  --lh-body: 1.5;
  --lh-tight: 1.2;

  --ls-display: -0.02em;
  --ls-headline: -0.012em;
  --ls-title: -0.008em;
  --ls-caps: 0.05em;

  /* === Spacing — Commerce-grade (압축) === */
  /* 첨부 HTML과 정합: edge-margin/gutter/stack-* */
  --edge-margin: 24px;       /* 페이지 좌우 (이전 40 → 24) */
  --edge-margin-mobile: 16px;
  --gutter: 16px;            /* 그리드 간격 (이전 12 → 16, but 카드 적당히) */
  --stack-xs: 4px;
  --stack-sm: 8px;
  --stack-md: 16px;
  --stack-lg: 32px;          /* 섹션 위아래 (이전 64 → 32) */
  --stack-xl: 48px;          /* 큰 섹션 사이 (이전 80 → 48) */
  --stack-2xl: 64px;

  /* Card paddings — 작게 */
  --card-pad: 12px;          /* 일반 카드 (이전 16-24 → 12) */
  --card-pad-md: 16px;
  --card-pad-lg: 20px;       /* Stat/Service 같은 큰 카드 */
  --card-pad-xl: 32px;       /* Hero/Service highlight */

  /* === Layout === */
  --content-max: 1280px;     /* 첨부 정합 (이전 1200 → 1280) */
  --gnb-h: 56px;
  --fab-bottom: 24px;

  /* === Radius === */
  --r-2:2px; --r-4:4px; --r-6:6px; --r-8:8px; --r-10:10px; --r-12:12px; --r-16:16px; --r-pill:9999px;

  /* === Shadow === */
  --shadow-1: 0 1px 2px rgba(15,17,22,0.04);
  --shadow-2: 0 2px 4px rgba(15,17,22,0.06), 0 1px 2px rgba(15,17,22,0.04);
  --shadow-3: 0 4px 8px rgba(15,17,22,0.08), 0 2px 4px rgba(15,17,22,0.04);
  --shadow-4: 0 8px 24px rgba(15,17,22,0.12), 0 4px 8px rgba(15,17,22,0.06);

  /* === Motion === */
  --t-fast: 120ms; --t-base: 180ms; --t-slow: 240ms;
  --ease-std: cubic-bezier(0.2,0,0,1);
  --ease-emp: cubic-bezier(0.16,1,0.3,1);

  /* === Focus ring (WCAG 2.2) === */
  --focus-ring:
    0 0 0 2px var(--bg-base),
    0 0 0 4px var(--mystic-500);

  /* === Input focus ring — subtle, fits inside form layouts === */
  --focus-ring-input: 0 0 0 3px color-mix(in srgb, var(--mystic-500) 32%, transparent);

  /* Material Symbols sizing helper */
  --icon-sm: 18px;
  --icon-md: 20px;
  --icon-lg: 24px;
}

/* === Dark mode === */
:root[data-theme="dark"] {
  --fg-base: var(--gray-50);
  --fg-subtle: var(--gray-300);
  --fg-muted: var(--gray-500);
  --fg-faint: var(--gray-600);

  --bg-base: var(--gray-950);
  --bg-subtle: var(--gray-900);
  --bg-muted: var(--gray-800);
  --bg-card: var(--gray-900);
  --bg-elevated: var(--gray-900);

  --border-subtle: var(--white-a100);
  --border-base: var(--white-a200);
  --border-strong: var(--white-a300);

  --action-primary-bg: var(--gray-50);
  --action-primary-bg-hover: var(--gray-0);
  --action-primary-fg: var(--gray-950);

  --action-secondary-bg: var(--white-a100);
  --action-secondary-bg-hover: var(--white-a200);
  --action-secondary-fg: var(--gray-50);
  --action-secondary-border: var(--white-a300);

  --action-tertiary-bg-hover: var(--white-a100);
  --action-tertiary-fg: var(--gray-300);
  --action-tertiary-fg-hover: var(--gray-50);
}

/* === Mobile typography overrides === */
@media (max-width: 767px) {
  :root {
    --fs-display: 26px;
    --fs-headline: 18px;
    --edge-margin: var(--edge-margin-mobile);
    --stack-lg: 24px;
    --stack-xl: 32px;
  }
}