/* ═══════════════════════════════════════════════════════════════════
   tokens.css — Catapulte v3 design system
   Dark-first editorial palette. Single accent (mauve). Warm neutrals.
   ═══════════════════════════════════════════════════════════════════ */
:root {
  /* ─── Canvas ─── */
  --ink-950: #0b0d10;  /* primary dark canvas */
  --ink-900: #111418;
  --ink-800: #181c21;
  --ink-700: #222830;
  --ink-600: #2e363f;
  --ink-500: #424b55;

  /* ─── Paper (warm cream for light interludes) ─── */
  --paper-100: #f6f2e9;
  --paper-200: #ece7d9;
  --paper-300: #d7d0bf;

  /* ─── Stone (warm neutral text) ─── */
  --stone-100: #eeebe3;
  --stone-200: #d6d2c6;
  --stone-300: #b8b3a4;
  --stone-400: #8e8a7d;
  --stone-500: #6b6a62;
  --stone-600: #4c4b46;

  /* ─── Accent (single mauve thread) ─── */
  --mauve-200: #e8dcf4;
  --mauve-300: #d5c3ea;
  --mauve-400: #c0a5dc;
  --mauve-500: #a384c9;
  --mauve-600: #806399;

  /* ─── Signal (used sparingly for one-off punches) ─── */
  --signal: #e4c27a;  /* warm amber, editorial highlight */

  /* ─── Semantic ─── */
  --bg:          var(--ink-950);
  --bg-soft:     var(--ink-900);
  --bg-paper:    var(--paper-100);
  --text:        var(--stone-100);
  --text-dim:    var(--stone-300);
  --text-mute:   var(--stone-400);
  --text-paper:  var(--ink-900);
  --text-paper-dim: var(--stone-600);
  --accent:      var(--mauve-400);
  --accent-soft: var(--mauve-300);
  --rule:        color-mix(in srgb, var(--stone-100) 14%, transparent);
  --rule-paper:  color-mix(in srgb, var(--ink-900) 12%, transparent);

  /* ─── Type ─── */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-serif: "Fraunces", "Playfair Display", Georgia, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Courier New", monospace;

  /* Type weights */
  --w-thin: 200;
  --w-light: 300;
  --w-regular: 400;
  --w-medium: 500;
  --w-semibold: 600;
  --w-bold: 700;
  --w-black: 900;

  /* Tracking */
  --track-display: -0.055em;
  --track-h1:      -0.04em;
  --track-h2:      -0.03em;
  --track-h3:      -0.02em;
  --track-body:    -0.005em;
  --track-label:   0.08em;
  --track-label-tight: 0.03em;

  /* Leading */
  --lead-display: 0.82;
  --lead-h1:      0.92;
  --lead-h2:      1.02;
  --lead-tight:   1.15;
  --lead-body:    1.55;
  --lead-prose:   1.65;

  /* ─── Scale ─── */
  --container-max: 1440px;
  --container-px:  clamp(24px, 4.5vw, 56px);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
  --space-11: 192px;
  --space-12: 256px;

  /* Chapter rhythm */
  --chapter-py: clamp(96px, 14vw, 200px);

  /* ─── Radius ─── */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-full: 9999px;

  /* ─── Motion ─── */
  --ease-out: cubic-bezier(0.16, 0.84, 0.32, 1);
  --ease-in-out: cubic-bezier(0.72, 0, 0.28, 1);
  --dur-fast: 0.24s;
  --dur-mid: 0.45s;
  --dur-slow: 0.75s;
  --dur-lux: 1.1s;
}

/* Grain pattern — fractal noise, used as overlay texture */
@property --grain-opacity {
  syntax: "<number>";
  inherits: false;
  initial-value: 0.06;
}