/* ====================================================================
   tokens.css  —  자동 생성 파일입니다. 직접 수정하지 마세요.
   원본: tokens.json   /   생성: node tools/build-tokens.mjs
   ==================================================================== */

:root {

  /* ────────────────────────────────────────────────────────────
     Color
     ──────────────────────────────────────────────────────────── */
  --brand-900: oklch(26% 0.065 305);
  --brand-800: oklch(33% 0.08 305);
  --brand-700: oklch(40% 0.085 305);
  --brand-500: oklch(56% 0.075 305);
  --brand-200: oklch(89% 0.03 305);
  --brand-100: oklch(95% 0.015 305);
  --ink: oklch(20% 0.015 300);
  --ink-soft: oklch(42% 0.018 300);
  --paper: oklch(99.3% 0.002 300);
  --bg: oklch(96% 0.008 300);
  --line: oklch(89% 0.01 300);
  --suit-red: oklch(44% 0.16 22);
  --suit-ink: oklch(16% 0.01 300);
  --win: oklch(46% 0.11 155);
  --win-soft: oklch(94% 0.035 155);
  --dealer-red: oklch(50% 0.15 22);
  --pocket-red: oklch(44% 0.16 22);
  --pocket-black: oklch(16% 0.01 300);
  --pocket-green: oklch(46% 0.11 155);
  --gold: oklch(78% 0.1 85);
  --lit: oklch(88% 0.14 95);
  --on-lit: oklch(30% 0.06 95);
  --lit-ink: oklch(92% 0.13 95);
  --warn-soft: oklch(96% 0.045 85);
  --warn-line: oklch(80% 0.1 85);
  --warn-ink: oklch(32% 0.07 60);
  --dealer-soft: oklch(97.5% 0.006 305);
  --lock-red: oklch(85% 0.14 22);
  --felt-cap-ink: oklch(85% 0.03 305 / 0.55);
  --felt-spot: oklch(30% 0.03 300 / 0.45);
  --felt-spot-line: oklch(85% 0.03 305 / 0.3);
  --felt-cell: oklch(32% 0.02 300 / 0.5);
  --ribbon-bg: oklch(28% 0.03 300 / 0.62);
  --ribbon-ink: oklch(93% 0.02 305);
  --page-bg: oklch(96% 0.006 300);
  --page-surface: oklch(99% 0.002 300);
  --page-ink: oklch(18% 0.012 300);
  --page-ink-soft: oklch(42% 0.014 300);
  --page-line: oklch(88% 0.01 300);
  --accent: oklch(40% 0.085 305);
  --accent-soft: oklch(93% 0.02 305);
  --good: oklch(46% 0.11 155);
  --good-soft: oklch(93% 0.03 155);

  /* ────────────────────────────────────────────────────────────
     Type families
     ──────────────────────────────────────────────────────────── */
  --font-display: var(--font-sans);
  --font-sans: "Optima", "NanumSquare", sans-serif;
  --font-mono: var(--font-sans);

  /* ────────────────────────────────────────────────────────────
     Spacing
     ──────────────────────────────────────────────────────────── */
  --gutter: 20px;
  --hero-x: 24px;
  --section-gap: 22px;
  --sheet-overlap: 17px;
  --card-pad: 14px;
  --row-pad: 12px;
  --list-gap: 9px;
  --bullet-gap: 8px;

  /* ────────────────────────────────────────────────────────────
     Size
     ──────────────────────────────────────────────────────────── */
  --touch-min: 44px;
  --cta-min: 48px;
  --row-min: 60px;
  --icon-tile: 40px;
  --step-dot: 20px;
  --screen: 390px;
  --column-max: 560px;

  /* ────────────────────────────────────────────────────────────
     Radius
     ──────────────────────────────────────────────────────────── */
  --radius-pill: 999px;
  --radius-sheet: 20px;
  --radius-felt: 18px;
  --radius-spotlight: 16px;
  --radius-card: 14px;
  --radius-row: 12px;
  --radius-control: 10px;
  --radius-ribbon: 9px;
  --radius-face: 6px;
  --radius-die: 22%;

  /* ────────────────────────────────────────────────────────────
     Shadow
     ──────────────────────────────────────────────────────────── */
  --shadow-face: 0 1px 3px oklch(20% 0.06 300 / 0.2);
  --shadow-felt: 0 10px 24px oklch(20% 0.06 300 / 0.28);
  --shadow-menu: 0 8px 20px oklch(20% 0.06 300 / 0.15);
  --shadow-cta-bar: 0 -6px 16px oklch(20% 0.06 300 / 0.05);
  --shadow-die: 0 2px 6px oklch(20% 0.06 300 / 0.35), inset 0 -2px 3px oklch(20% 0.06 300 / 0.12);
  --shadow-selected: 0 0 0 1.5px oklch(40% 0.085 305);
  --shadow-lit: 0 0 0 2px oklch(88% 0.14 95 / 0.35);
}

/* OS 가 다크 모드일 때 (단, 사용자가 data-theme="light" 로 고정하지 않았다면) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --page-bg: oklch(15.5% 0.012 300);
    --page-surface: oklch(20% 0.014 300);
    --page-ink: oklch(94% 0.006 300);
    --page-ink-soft: oklch(68% 0.014 300);
    --page-line: oklch(30% 0.016 300);
    --accent: oklch(74% 0.09 305);
    --accent-soft: oklch(27% 0.045 305);
    --good: oklch(72% 0.13 155);
    --good-soft: oklch(26% 0.05 155);
  }
}

/* 수동으로 다크를 강제할 때 */
:root[data-theme="dark"] {
  --page-bg: oklch(15.5% 0.012 300);
  --page-surface: oklch(20% 0.014 300);
  --page-ink: oklch(94% 0.006 300);
  --page-ink-soft: oklch(68% 0.014 300);
  --page-line: oklch(30% 0.016 300);
  --accent: oklch(74% 0.09 305);
  --accent-soft: oklch(27% 0.045 305);
  --good: oklch(72% 0.13 155);
  --good-soft: oklch(26% 0.05 155);
}