/* Spark — color tokens.
   ONE bright, warm register. The brand orange→gold gradient is for the
   wordmark, the primary CTA, and small accents ONLY — never a full-screen wash.
   Never hard-code hex; use these vars. */

:root {
  /* ── Brand ───────────────────────────────────────────────── */
  --spark-orange:   #FF6B00;
  --spark-gold:     #FFC000;
  --spark-gradient: linear-gradient(135deg, #FF6B00 0%, #FFC000 100%); /* @kind color */
  /* Softer ember tint used for glows / hover halos */
  --spark-soft:     #FF8F5E;
  --spark-glow:     rgba(255, 107, 0, 0.28);

  /* ── Warm cream canvas system (the single register) ──────────
     Sections alternate between these warm tones — page → soft → peach.
     They are all bright; there is no dark canvas. */
  --cream:        #FBF3E8;  /* page base */
  --cream-soft:   #FFFAF2;  /* lightest section / hero top */
  --cream-2:      #F4E9D6;  /* warmer panel / "sand" card */
  --cream-deep:   #FAE6CE;  /* peach feature section */
  --cream-deeper: #F0E2CC;  /* footer / deepest warm */
  --surface-white: #FFFFFF; /* cards */

  /* ── Warm hairline ───────────────────────────────────────── */
  --line:            #ECDDC6;
  --border-hairline: #ECDDC6;

  /* ── Text — warm ink ─────────────────────────────────────── */
  --ink:            #2A1D14;  /* primary copy / headlines */
  --ink-soft:       #83715F;  /* secondary / muted copy */
  --text-primary:   #2A1D14;
  --text-secondary: #83715F;

  /* ── Warm accent pill ────────────────────────────────────── */
  --pill-bg:     #FFF7ED;
  --pill-border: #FED7AA;
  --pill-text:   #D97706;

  /* ── Semantic aliases ────────────────────────────────────── */
  --surface-card:   var(--surface-white);
  --surface-sand:   var(--cream-2);
  --text-body:      var(--text-secondary);
  --text-heading:   var(--text-primary);
  --accent:         var(--spark-orange);
  --accent-2:       var(--spark-gold);

  /* ── Back-compat aliases (legacy "dark/light register" names) ──
     The dark register was retired; these map old names onto the warm
     system so existing markup keeps rendering. Prefer the names above. */
  --light-top:        #FFFAF2;
  --light-bottom:     #FBF1E1;
  --light-canvas:     linear-gradient(180deg, #FFFAF2 0%, #FBF1E1 100%); /* @kind color */
  --dark-canvas:      var(--cream-deep);
  --dark-canvas-alt:  var(--cream-deeper);
  --dark-surface:     var(--surface-white);
  --dark-hairline:    var(--line);
  --text-on-dark:      var(--ink);
  --text-on-dark-dim:  var(--ink-soft);
  --text-on-dark-mute: var(--ink-soft);
  --surface-raised:    var(--surface-white);
}