/* ============================================================
   Invoice Adventure — Design Tokens
   "Pulp adventure meets modern fintech": deep ink, treasure gold,
   parchment documents, cool data-teal. Cinematic + clean.
   ============================================================ */
:root {
  /* --- Core palette --- */
  --ink-950: #070b16;
  --ink-900: #0b1020;
  --ink-850: #111831;
  --ink-800: #161f3d;
  --ink-700: #1f2a52;
  --ink-600: #2c3a6b;
  --ink-500: #3b4d86;

  --paper-50: #faf3e2;
  --paper-100: #f3e7cf;
  --paper-200: #e7d4ad;
  --paper-300: #d8bd86;
  --paper-ink: #3a2f1c;

  /* Treasure gold — the Indiana Jones accent */
  --gold-300: #f4d27a;
  --gold-400: #e8b54b;
  --gold-500: #d99a2b;
  --gold-600: #b97c14;

  /* Data teal — the "e-invoicing / digital" secondary */
  --teal-300: #7fe3dc;
  --teal-400: #4ec5c1;
  --teal-500: #2ba6a2;

  --rouge-400: #e0566b;   /* France / alerts */
  --bleu-400: #4d7ce0;    /* France blue */
  --emerald-400: #4fbf8b; /* success / compliant */

  /* --- Semantic --- */
  --bg: var(--ink-950);
  --stage-bg: var(--ink-900);
  --surface: rgba(17, 24, 49, 0.86);
  --surface-2: rgba(31, 42, 82, 0.72);
  --surface-line: rgba(244, 210, 122, 0.16);
  --text: #eef2ff;
  --text-dim: #aab3d4;
  --text-faint: #6f79a0;
  --accent: var(--gold-400);
  --accent-soft: rgba(232, 181, 75, 0.14);
  --link: var(--teal-300);

  /* --- Type --- */
  --font-ui: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
  --font-display: "Trajan Pro", "Cinzel", "Georgia", "Times New Roman", serif;
  --font-mono: ui-monospace, "Cascadia Code", "SFMono-Regular", Menlo,
    Consolas, monospace;

  /* --- Spacing / shape --- */
  --r-sm: 7px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 26px;
  --shadow-1: 0 2px 8px rgba(0, 0, 0, 0.35);
  --shadow-2: 0 10px 30px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 0 0 1px var(--surface-line), 0 12px 40px rgba(0, 0, 0, 0.55);

  /* --- Motion --- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --fast: 140ms;
  --med: 280ms;
  --slow: 520ms;

  /* Stage reference resolution (scene coordinate space) */
  --stage-w: 1280;
  --stage-h: 720;
}

@media (prefers-reduced-motion: reduce) {
  :root { --fast: 0ms; --med: 0ms; --slow: 0ms; }
}