/* ============================================================
   Kindling Design Kit — Canon Tokens
   The single source of truth for color, type, motion, radius, and glow.
   Every rule in components.css references these — never a raw hex or
   font name. If a value isn't on this sheet, it isn't canon.

   Variable names match the component catalog's shell exactly, so
   importing this file is a drop-in for any surface built from the kit.
   ============================================================ */

:root {
  /* ---- Accent — Ember (the ONE accent; six roles only) --------------
     CTA fill · phrase-highlight · hover signal · dot/bullet · glow/bloom
     · icon-in-chip. Never running text. */
  --ember:      #FF4A0D;   /* base */
  --ember-600:  #E43D05;   /* hover / pressed */
  --ember-100:  #FFE7DC;   /* light tint (rare) */

  /* ---- Ground — Ink (page → card → raised) ------------------------- */
  --ink-900:    #0A0A0A;   /* page */
  --ink-800:    #141414;   /* card */
  --ink-700:    #1C1C1C;   /* raised */
  --ink-600:    #242424;   /* highest raised */

  /* ---- Lines ------------------------------------------------------- */
  --line:       #2A2A2A;   /* hairline */
  --line-soft:  #1F1F1F;   /* faint divider */

  /* ---- Text — Chalk → Fog ------------------------------------------ */
  --chalk:      #F5F5F5;   /* primary */
  --chalk-dim:  #C9C9C9;   /* secondary */
  --fog:        #9A9A9A;   /* muted */
  --fog-2:      #6B6B6B;   /* faint */

  /* ---- Bone (light inversion — rare) ------------------------------- */
  --bone:       #F4F2EE;

  /* ---- Type — three lanes, strict: display / body / label ---------- */
  --sans:     'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* body · nav · buttons */
  --display:  'Space Grotesk', var(--sans);                                       /* headlines only */
  --mono:     'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;         /* labels + metadata only */

  /* ---- Radius ------------------------------------------------------ */
  --radius-card:  16px;    /* cards (oversized panels step to 24px inline) */
  --radius-pill:  999px;   /* pills · circles */

  /* ---- Ember glow (card / CTA) ------------------------------------- */
  --glow:         0 0 22px rgba(255, 74, 13, .28);   /* rest */
  --glow-strong:  0 0 34px rgba(255, 74, 13, .5);    /* hover */

  /* ---- Motion — one ease across the whole system ------------------- */
  --ease:  cubic-bezier(.22, 1, .36, 1);
}