/* ============================================================
   SPARKIO — Brand Tokens
   Warm ember spark on near-black. Geometric modern type.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700;800;900&family=Geist+Mono:wght@400;500;600&display=swap');

:root {
  /* — Neutrals (warm-toned) — */
  --void:    #0B0A09;   /* deepest background */
  --ink:     #100E0C;   /* primary dark bg */
  --carbon:  #17140F;   /* raised surface / cards */
  --ash:     #221E18;   /* borders, hairlines on dark */
  --smoke:   #6B6358;   /* muted text on dark */
  --fog:     #A39A8C;   /* secondary text on dark */
  --paper:   #F4F0E8;   /* warm off-white */
  --paper-2: #E9E3D7;   /* dim paper */

  /* — Ember accents (single chroma family, varied hue) — */
  --ember:   #FF7A2E;   /* primary spark — oklch(.74 .17 52) */
  --flame:   #FFA23E;   /* lighter flame — oklch(.81 .15 65) */
  --glow:    #FFD37A;   /* spark highlight — oklch(.89 .11 80) */
  --coal:    #C5471A;   /* deep ember shadow */

  /* — Effects — */
  /* gradient stops (overridable by accent tweak) */
  --g1: #FF6A1A;
  --g2: #FF8A3D;
  --g3: #FFC46B;
  --ember-grad: linear-gradient(135deg, var(--g1) 0%, var(--g2) 45%, var(--g3) 100%);
  --ember-glow: 0 0 0px rgba(255,138,61,0);
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 34px;

  --font-sans: 'Geist', system-ui, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; }

.mono { font-family: var(--font-mono); }
.sans { font-family: var(--font-sans); }