/* css/brand.css - SPARKS-SIX "Atelier" brand identity (the wrapper's OWN look,
   independent of the AI-tool chat skins). One warm-dark palette, one gold accent,
   Fraunces display + Inter. The P2 theme A/B swaps this token set via [data-brand]. */
:root,
[data-brand="atelier"] {
  --brand-bg:        #1A1814;
  --brand-raised:    #221E18;
  --brand-ink:       #F4EDDD;
  --brand-ink-60:    #A89C84;
  --brand-accent:    #E9C26A;
  --brand-accent-hi: #FBEAB6;
  --brand-line:      rgba(233, 194, 106, 0.22);
  --brand-glow:      radial-gradient(900px 520px at 80% -10%, rgba(233,194,106,0.12), transparent 60%);
  --brand-display:   "Fraunces", Georgia, "Times New Roman", serif;
  --brand-sans:      "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* "Editorial Light" - the A/B challenger: warm paper + a single teal accent,
   Inter throughout. Same token contract as Atelier, so every brand surface
   (hub + quiz + result) swaps by flipping [data-brand]. */
[data-brand="editorial"] {
  --brand-bg:        #FBFAF6;
  --brand-raised:    #FFFFFF;
  --brand-ink:       #1B1A17;
  --brand-ink-60:    #6E6A60;
  --brand-accent:    #0E7C72;
  --brand-accent-hi: #14B8A6;
  --brand-line:      rgba(27, 26, 23, 0.12);
  --brand-glow:      radial-gradient(820px 480px at 82% -12%, rgba(14,124,114,0.08), transparent 60%);
  --brand-display:   "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --brand-sans:      "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* In the takeable quiz view (html[data-quiz="1"]) the wrapper surfaces - the
   question cards and the result card - adopt the BRAND identity instead of the
   AI-tool chat skin. Specificity (0,2,1) beats the skins' [data-skin][data-mode]
   (0,2,0), so this wins regardless of load order. The persona DEMOS (no data-quiz)
   keep the skin - they are "watch someone use their AI tool". */
html[data-quiz="1"][data-brand] {
  --bg:        var(--brand-bg);
  --fg:        var(--brand-ink);
  --bg-elev:   var(--brand-raised);
  --accent:    var(--brand-accent);
  --border:    var(--brand-line);
  --font-base: var(--brand-sans);
}