/* Design tokens — single source of truth for colour, type, spacing, radius, shadow.
   Mirror of the mockup palette: paper / ink + spark accent family. */
:root {
  /* Base surfaces */
  --color-bg: #0b0b0c;
  --color-ink: #0b0b0c;
  --color-paper: #f5f1ea;
  --color-paper-2: #ece6da;

  /* Borders and rules */
  --color-rule: rgba(11, 11, 12, 0.12);
  --color-rule-strong: rgba(11, 11, 12, 0.18);
  --color-rule-light: rgba(245, 241, 234, 0.18);

  /* Spark accent family */
  --color-spark: #ff5a1f;
  --color-spark-2: #ffb020;
  --color-spark-3: #e21717;

  /* Status colours (admin) */
  --color-ok: #3acb6a;
  --color-ok-fade: rgba(58, 203, 106, 0.18);
  --color-warn: #ffb020;
  --color-err: #e21717;

  /* Text on dark backgrounds. `mute` clears WCAG AA on ink (#0b0b0c).
     `dim` is for decorative-only — never use it for body text. */
  --color-paper-soft: rgba(245, 241, 234, 0.78);
  --color-paper-mute: rgba(245, 241, 234, 0.6);
  --color-paper-dim: rgba(245, 241, 234, 0.45);

  /* Text on light backgrounds. Same convention — `mute` is text-safe,
     `dim` is decoration only. */
  --color-ink-soft: rgba(11, 11, 12, 0.72);
  --color-ink-mute: rgba(11, 11, 12, 0.6);
  --color-ink-dim: rgba(11, 11, 12, 0.45);

  /* Typography */
  --font-display: 'Unbounded', 'Arial Black', sans-serif;
  --font-body: 'Manrope', system-ui, -apple-system, sans-serif;
  --font-size-xs: 11px;
  --font-size-sm: 12px;
  --font-size-base: 14px;
  --font-size-md: 15px;
  --font-size-lg: 16px;
  --line-tight: 1.1;
  --line-snug: 1.45;
  --line-normal: 1.55;

  /* Spacing — 4px scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* Radius */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-pill: 100px;
  --radius-circle: 50%;

  /* Shadow / elevation */
  --shadow-card: 0 12px 40px rgba(0, 0, 0, 0.18);
  --shadow-deep: 0 30px 80px rgba(0, 0, 0, 0.5);

  /* Motion */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-bounce: cubic-bezier(0.2, 0.6, 0.2, 1);
  --duration-fast: 0.15s;
  --duration: 0.25s;
  --duration-slow: 0.6s;

  /* Layout */
  --tap-min: 44px;
  --content-max: 1320px;
  --header-h: 60px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}