/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   IGNITION — shared theme stylesheet
   Single source of truth for the dark theme palette,
   companion-specific colour variables, and rules.
   Linked from every page; CLAUDE.md Section 3 is the spec.

   To change Sparks colour: edit --sparks-color.
   To change Beacon colour: edit --beacon-color.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

:root {
  /* Palette */
  --bg:        #0D1117;
  --bg-card:   #1A1F2E;
  --bg-nav:    #13181F;
  --orange:    #FF8A1E;
  --teal:      #11D1C3;
  --gold:      #FFD166;
  --text-h:    #E6E6E6;
  --text-b:    rgba(230,230,230,0.75);
  --text-m:    rgba(230,230,230,0.50);
  --border:    rgba(17,209,195,0.15);
  --border-nav: rgba(17,209,195,0.1);
  --white:     #FFFFFF;

  /* Companion-specific colours — change here, propagates everywhere */
  --sparks-color:       var(--teal);
  --sparks-bubble-bg:   var(--teal);
  --sparks-bubble-text: #0D1117;
  --beacon-color:       var(--gold);
  --beacon-bubble-bg:   var(--gold);
  --beacon-bubble-text: #0D1117;

  /* Auxiliary states */
  --orange-hover:       #C94610;
  --alert-red:          #D9534F;
}

/* ── COMPANIONS PICKER PAGE ── */
.companions-page .sparks-role { color: var(--sparks-color) !important; }
.companions-page .sparks-tagline { color: var(--sparks-color) !important; }
.companions-page .beacon-role { color: var(--beacon-color) !important; }
.companions-page .beacon-tagline { color: var(--beacon-color) !important; }
.companions-page .page-header h1 em { color: var(--orange) !important; }
.companions-page .companion-card-role { color: inherit; }
.companions-page .companion-card-tagline { color: inherit; }

/* ── SPARKS PAGES ── */
.sparks-page em { color: var(--sparks-color) !important; }
.sparks-page .hl { color: var(--sparks-color) !important; }
.sparks-page .meet-label { color: var(--sparks-color) !important; }
.sparks-page .panel-title .hl { color: var(--sparks-color) !important; }
.sparks-page .panel-desc .hl { color: var(--sparks-color) !important; }
.sparks-page .step-card-body .hl { color: var(--sparks-color) !important; }
.sparks-page .compass-line .hl { color: var(--sparks-color) !important; }
.sparks-page .section-label { color: var(--sparks-color) !important; }
.sparks-page .ps-name { color: var(--sparks-color) !important; }
.sparks-page .hero-eyebrow { color: var(--sparks-color) !important; }
.sparks-page .hero-stat-num { color: var(--sparks-color) !important; }
.sparks-page a.section-link { color: var(--sparks-color) !important; }
.sparks-page .stat-banner-sub .hl { color: var(--sparks-color) !important; }
.sparks-page .s2-headline .hl { color: var(--sparks-color) !important; }
.sparks-page .s2-stat-line .hl { color: var(--sparks-color) !important; }
.sparks-page .ps-label { color: var(--sparks-color) !important; }
.sparks-page .pill { color: var(--sparks-color) !important; border-color: var(--sparks-color) !important; }
.sparks-page .chat-bubble-sparks { background: var(--sparks-color) !important; color: #0D1117 !important; }
.sparks-page .chat-bubble-sparks .highlight { color: #0D1117 !important; }

/* ── BEACON PAGES ── */
.beacon-page em { color: var(--beacon-color) !important; }
.beacon-page .hl { color: var(--beacon-color) !important; }
.beacon-page .meet-label { color: var(--beacon-color) !important; }
.beacon-page .panel-title .hl { color: var(--beacon-color) !important; }
.beacon-page .panel-desc .hl { color: var(--beacon-color) !important; }
.beacon-page .compass-line .hl { color: var(--beacon-color) !important; }
.beacon-page .section-label { color: var(--beacon-color) !important; }
.beacon-page .hero-eyebrow { color: var(--beacon-color) !important; }
.beacon-page .hero-stat-num { color: var(--beacon-color) !important; }
.beacon-page a.section-link { color: var(--beacon-color) !important; }
.beacon-page .domain-name { color: var(--beacon-color) !important; }
.beacon-page .dashboard-stars { color: var(--beacon-color) !important; }
.beacon-page .thought-overlay-text .hl { color: var(--beacon-color) !important; }
.beacon-page .lc-headline em { color: var(--beacon-color) !important; }
.beacon-page .lc-oecd { color: var(--beacon-color) !important; }
.beacon-page .s2-headline .hl { color: var(--beacon-color) !important; }
.beacon-page .s2-stat-line .hl { color: var(--beacon-color) !important; }
.beacon-page .hero-stat-source { color: var(--text-m) !important; }
.beacon-page .pill { color: var(--beacon-color) !important; border-color: var(--beacon-color) !important; }
.beacon-page .chat-bubble-beacon { background: var(--beacon-color) !important; color: #0D1117 !important; }
.beacon-page .chat-bubble-beacon .highlight { color: #0D1117 !important; }
.beacon-page .chat-bubble-teen { background: var(--orange) !important; color: #FFFFFF !important; }

/* ── CTAs ALWAYS ORANGE — never override ── */
.sparks-page em.cta-text,
.beacon-page em.cta-text,
.companions-page em.cta-text { color: var(--orange) !important; }

.nav-cta,
.btn-submit,
.cta-submit,
.companion-card-cta,
.waitlist-btn,
.btn-ghost {
  background: var(--orange) !important;
  color: var(--white) !important;
}

/* ── NEUTRAL PAGES — orange only ── */
.page-header h1 em { color: var(--orange); }
h1 em { color: var(--orange); }