/* ─────────────────────────────────────────────────────────────
 * tokens.css — Design tokens
 * Single source of truth for colors, typography, spacing,
 * radius, motion. Change values here, the rest follows.
 * ───────────────────────────────────────────────────────────── */

:root {
  /* ── Surfaces ─────────────────────────────────────── */
  --bg-base:    #07080F;
  --bg-deep:    #0A0B14;
  --bg-elev:    #14162A;
  --bg-card:    #11131F;
  --bg-card-hi: #181B2A;

  /* ── Foreground ───────────────────────────────────── */
  --text:       #F5F5F7;
  --text-soft:  #A1A1AA;
  --text-faint: #B3B8C2;
  --text-dim:   #8F96A3;

  /* ── Borders ──────────────────────────────────────── */
  --border:        rgba(255, 255, 255, 0.08);
  --border-bright: rgba(255, 255, 255, 0.16);
  --border-glow:   rgb(var(--accent-rgb) / 0.45);

  /* ── Accents ──────────────────────────────────────── */
  --accent:       #F59E0B;
  --accent-solid: #A45112;
  --accent-alt:   #2DD4BF;
  --accent-rgb:       245 158 11;
  --accent-solid-rgb: 164 81 18;
  --accent-alt-rgb:   45 212 191;

  /* Legacy tone aliases keep existing components token-driven. */
  --violet-300: #F8C77E;
  --violet-400: var(--accent);
  --violet-500: var(--accent-solid);
  --violet-600: var(--accent-solid);
  --violet-700: #7C2D12;
  --cyan-300:   #7FEADC;
  --cyan-400:   var(--accent-alt);
  --cyan-500:   #0F766E;
  --pink-400:   var(--accent);
  --amber-400:  var(--accent);
  --emerald-400: var(--accent-alt);

  /* ── Typography stack ─────────────────────────────── */
  --font-display: system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-sans:    system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'SFMono-Regular', Consolas, 'Liberation Mono', monospace;

  /* ── Fluid type scale (clamp: min, fluid, max) ────── */
  --t-xs:   clamp(0.72rem, 0.7rem + 0.1vw, 0.78rem);
  --t-sm:   clamp(0.82rem, 0.78rem + 0.2vw, 0.92rem);
  --t-base: clamp(0.94rem, 0.88rem + 0.3vw, 1.05rem);
  --t-lead: clamp(1.08rem, 0.98rem + 0.5vw, 1.32rem);
  --t-h4:   clamp(1.25rem, 1rem + 1vw, 1.6rem);
  --t-h2:   clamp(1.8rem, 1.4rem + 2vw, 3rem);
  --t-h1:   clamp(2.4rem, 1.8rem + 3.5vw, 4.6rem);
  --t-chapter: clamp(0.92rem, 0.84rem + 0.35vw, 1.08rem);
  --t-chapter-mark: clamp(3.2rem, 5.6vw, 4.8rem);

  /* ── Layout ───────────────────────────────────────── */
  --max:    1320px;
  --gutter: clamp(1.25rem, 3vw, 3rem);
  --chapter-stamp-min: min(100%, clamp(7.2rem, 10vw, 9rem));
  --chapter-stamp-pad: 0.72rem 1rem 0.68rem 2.2rem;
  --chapter-mark-left: 0.08rem;
  --chapter-mark-bottom: -0.58rem;
  --chapter-rule-width: 2rem;
  --chapter-hover-shift: 0.25rem;
  --chapter-bar-gap: clamp(0.9rem, 2vw, 1.5rem);
  --chapter-bar-pad: clamp(1rem, 2vw, 1.35rem);
  --chapter-bar-inset: clamp(1rem, 2vw, 1.35rem);
  --chapter-bar-margin: clamp(2.4rem, 5vw, 3.6rem) 0 1.35rem;

  /* ── Radius ───────────────────────────────────────── */
  --radius-lg: 22px;
  --radius-stamp: 8px;
  --radius-chapter: 18px;

  /* ── Motion ───────────────────────────────────────── */
  --dur-fast: 220ms;
  --dur:      380ms;
  --ease:     cubic-bezier(0.22, 1, 0.36, 1);

  /* ── Color scheme hint ────────────────────────────── */
  color-scheme: dark;
}