/* Design tokens — warm "paper theatre" direction for a Vietnamese folk tale. */

:root {
  /* Paper & ink */
  --color-paper: oklch(96.5% 0.018 85);
  --color-paper-deep: oklch(93% 0.026 82);
  --color-paper-edge: oklch(87% 0.032 78);
  --color-ink: oklch(26% 0.03 60);
  --color-ink-soft: oklch(46% 0.028 62);
  --color-ink-faint: oklch(64% 0.022 66);

  /* Stage (the 3D viewport is always the dark room) */
  --color-stage-top: oklch(30% 0.035 62);
  --color-stage-bottom: oklch(17% 0.028 58);
  --color-stage-ink: oklch(96% 0.02 84);
  --color-stage-ink-soft: oklch(80% 0.025 80);

  /* Accents */
  --color-gold: oklch(78% 0.145 78);
  --color-gold-deep: oklch(62% 0.135 68);
  --color-leaf: oklch(58% 0.095 152);
  --color-danger: oklch(58% 0.16 26);

  /* Surfaces */
  --surface-glass: oklch(22% 0.03 60 / 0.72);
  --surface-glass-strong: oklch(19% 0.03 58 / 0.92);
  --surface-rail: oklch(97.5% 0.014 85);
  --hairline: oklch(26% 0.03 60 / 0.14);
  --hairline-stage: oklch(96% 0.02 84 / 0.16);

  /* Typography */
  --font-display: "Playfair Display", "Iowan Old Style", "Palatino Linotype",
    Georgia, "Times New Roman", serif;
  --font-body: "Be Vietnam Pro", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;

  --text-micro: 0.6875rem;
  --text-small: 0.8125rem;
  --text-base: clamp(0.9375rem, 0.9rem + 0.18vw, 1.0625rem);
  --text-lead: clamp(1rem, 0.94rem + 0.3vw, 1.1875rem);
  --text-title: clamp(1.5rem, 1.05rem + 1.9vw, 2.75rem);
  --text-numeral: clamp(2.75rem, 1.6rem + 4.6vw, 5.5rem);

  --tracking-eyebrow: 0.16em;

  /* Rhythm — deliberately uneven, not one padding everywhere */
  --space-hair: 0.25rem;
  --space-tight: 0.5rem;
  --space-snug: 0.75rem;
  --space-base: 1.125rem;
  --space-loose: 1.75rem;
  --space-wide: clamp(1.5rem, 1rem + 2vw, 3rem);

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  --shadow-lift: 0 1px 2px oklch(24% 0.03 60 / 0.08),
    0 8px 24px oklch(24% 0.03 60 / 0.1);
  --shadow-dock: 0 2px 6px oklch(12% 0.02 58 / 0.3),
    0 18px 48px oklch(12% 0.02 58 / 0.42);

  --duration-fast: 140ms;
  --duration-normal: 260ms;
  --duration-slow: 520ms;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);

  --rail-width: 19rem;
  --topbar-height: 4.25rem;
}

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