/* ==========================================================================
   brand-consistency.css — the one homepage-canonical visual system
   Spec: docs/superpowers/specs/2026-06-07-brand-design-system.md
   Standard: black/gray surfaces · orange→yellow accent (SPARINGLY) · white
   text default · RECTANGULAR cards+buttons · outline buttons · Inter.
   NO green, NO purple. Built on existing design-tokens.css (with fallbacks);
   does not introduce new tokens.
   ========================================================================== */

:root {
  /* Canonical aliases (fall back to homepage values if design-tokens.css absent) */
  --bsa-bg:        var(--color-bg-primary, #16181c);
  --bsa-surface:   #101010;
  --bsa-surface-2: var(--color-bg-tertiary, #2d2d2d);
  --bsa-text:      var(--color-text-primary, #F7F7F2);
  --bsa-text-muted:var(--color-text-secondary, #b3b3b3);
  --bsa-accent:    var(--color-primary, #FF7A00);
  --bsa-accent-2:  var(--color-primary-hover, #FFD400);
  --bsa-border:    #2a2a2a;
  --bsa-radius:    10px;                /* rounded (homepage-matched 2026-06-09) */
  /* Canonical homepage accent fade (exact stops, measured from homepage) */
  --bsa-grad:      var(--brand-gradient, linear-gradient(135deg, #FF7A00 0%, #FF9A00 45%, #FFD400 100%));
  --bsa-ink:       #16181c;             /* dark text for use ON the bright gradient */
  --bsa-font:      var(--font-sans, 'Inter', system-ui, -apple-system, sans-serif);
}

/* ---------- 1. Canonical primitives (use these on new/normalized markup) ---------- */
.bsa-card {
  background: var(--bsa-surface);
  border: 1px solid var(--bsa-border);
  border-radius: var(--bsa-radius);
  padding: 1.5rem;
  color: var(--bsa-text);
}
.bsa-card h2, .bsa-card h3 { color: var(--bsa-accent); }

.bsa-btn,
.bsa-btn-primary,
.bsa-btn-secondary {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border-radius: var(--bsa-radius);
  font-weight: 700;
  font-family: var(--bsa-font);
  text-decoration: none;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
/* Primary = gradient OUTLINE + gradient (faded) text on the near-black surface.
   The box is transparent (page/card #16181C reads as the background); the gradient
   border is drawn by ::before with a mask so it RESPECTS the rounded radius (unlike
   border-image, which squares the corners). Secondary = solid orange outline. */
.bsa-btn-primary {
  position: relative;
  background: var(--bsa-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--bsa-accent);
  border: none;
  border-radius: var(--bsa-radius);
  font-weight: 800;
}
.bsa-btn-primary::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: var(--bsa-grad);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.bsa-btn-primary:hover { filter: brightness(1.12); }
.bsa-btn-secondary {
  background: transparent;
  color: var(--bsa-accent);
  border: 2px solid rgba(255,122,0,.5);
}

.bsa-input, .bsa-card input, .bsa-card textarea, .bsa-card select {
  background: var(--bsa-surface);
  border: 1px solid var(--bsa-border);
  border-radius: var(--bsa-radius);
  color: var(--bsa-text);
}

/* Accent: gradient title / underline — use sparingly */
.bsa-accent-text { color: var(--bsa-accent); }
.bsa-gradient-text {
  background: var(--bsa-grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--bsa-accent);
}

/* Type scale — smaller, clean. Accent titles use the gradient fade. */
.bsa-title {
  font-size: 1.85rem; font-weight: 700; letter-spacing: -0.01em;
  background: var(--bsa-grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--bsa-accent);
}
.bsa-subtitle { font-size: 1rem; color: var(--bsa-text-muted); }
.bsa-section-title {
  font-size: 1.3rem; font-weight: 700;
  background: var(--bsa-grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--bsa-accent);
}

/* ---------- 2. Drift-neutralization (opt-in: <body class="bsa-skin">) ----------
   Forces the canonical look onto a page that adopts it, overriding off-brand
   page-local theming. Per-page remaps of bespoke vars happen at rollout; this
   covers the common, repeated drift patterns. */
body.bsa-skin {
  background: var(--bsa-bg) !important;
  color: var(--bsa-text) !important;
  font-family: var(--bsa-font) !important;
}
/* Neutralize the known youth-track green vars site-wide when skinned */
body.bsa-skin {
  --primary-green: var(--bsa-accent);
  --primary-green-dark: var(--color-primary-dark, #E67E00);
  --dark-bg: var(--bsa-bg);
  --card-bg: var(--bsa-surface);
  --border-color: var(--bsa-border);
  --text-primary: var(--bsa-text);
  /* "NO green ever" rule: pages that aliased --success to a drift green
     (#10b981) are remapped to the orange accent so skinned pages are fully
     green-free. (Deviates from the spec's "preserve success green" line —
     flagged; revisit per-group when the rollout resumes.) Error stays red,
     warning stays amber — only the green is neutralized. */
  --success: var(--bsa-accent);
}
/* Paths group remaps (rollout 2026-06-09): per-path IDENTITY colors are dropped —
   every path uses the uniform brand orange accent (Dalia's call). Path-identity
   vars -> accent; surfaces/text/serif -> canonical. Semantic content colors
   (--accent-blue/green/red) are kept as the 4-palette (info/success/error). */
body.bsa-skin {
  --path-curious: var(--bsa-accent); --path-sovereign: var(--bsa-accent);
  --path-builder: var(--bsa-accent); --path-principled: var(--bsa-accent);
  --path-pragmatist: var(--bsa-accent); --path-hurried: var(--bsa-accent);
  --path-skeptic: var(--bsa-accent); --path-observer: var(--bsa-accent);
  --path-color: var(--bsa-accent); --path-color-light: var(--bsa-surface-2);
  --accent-purple: var(--bsa-accent); --accent-gold: var(--bsa-accent);
  --accent-orange: var(--bsa-accent);
  --accent-blue: #3b82f6; --accent-green: #28a745; --accent-red: #dc3545;
  /* Red TEXT variant (decided 2026-06-10): #dc3545 fails AA as small text on
     dark surfaces (3.0-4.2:1). Text usages reference --accent-red-text;
     borders/fills/icons keep #dc3545. #ec7c87 = 5.1:1 on #2d2d2d, 7.1 on #101010. */
  --accent-red-text: #ec7c87;
  --primary-dark: var(--bsa-bg); --secondary-dark: var(--bsa-surface);
  --text-light: var(--bsa-text); --text-dim: var(--bsa-text-muted);
  --serif: var(--bsa-font); --sans: var(--bsa-font);
  /* bespoke per-page identity vars found in paths (2026-06-10 sweep) */
  --sovereign-gold: var(--bsa-accent); --builder-purple: var(--bsa-accent);
  --corporate-purple: var(--bsa-accent); --fedimint-purple: var(--bsa-accent);
  --primary-gold: var(--bsa-accent);
  --pragmatist-cyan: var(--bsa-accent); --pragmatist-teal: var(--bsa-accent);
  --accent-skeptic: var(--bsa-accent); --accent-skeptic-dark: var(--bsa-surface-2);
  --accent-skeptic-light: var(--bsa-accent-2);
}
/* Rectangular everything that reads as a card/button/field */
body.bsa-skin :is(.card,[class*="card"],.btn,[class*="btn"],button,
  .stage,.next-week,.cta-section,[class*="section"],[class*="box"],
  input,textarea,select) {
  border-radius: var(--bsa-radius) !important;
}
/* White text default for body copy/labels (orange reserved for headings) */
body.bsa-skin :is(p,li,td,.label,[class*="-name"],[class*="-description"],[class*="-text"]) {
  color: var(--bsa-text-muted);
}
/* Buttons -> restrained OUTLINE (orange border + white text), small. The
   gradient is reserved for titles/borders, not big filled blocks ("too much
   fade"). A rare hero CTA can opt into the gradient fill via .bsa-btn-primary.
   Semantic variants (danger/warning/success) are EXCLUDED so red/yellow/green
   keep their meaning — color carries meaning. */
body.bsa-skin :is(.btn-primary,a.btn-primary,button.btn-primary,
  .cta-primary,a.cta-primary,button.cta-primary,
  .start-button,a.start-button,button.start-button,
  .stage-btn,a.stage-btn,
  .btn,a.btn):not(.btn-danger):not(.btn-warning):not(.btn-success):not(.btn-error) {
  background: transparent !important;
  background-image: none !important;
  color: var(--bsa-text) !important;
  -webkit-text-fill-color: var(--bsa-text) !important;
  border: 2px solid var(--bsa-accent) !important;
  padding: 0.5rem 1.1rem !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
}
/* On-brand hover affordance (subtle orange wash) — also overrides any page's
   green :hover { background } since this is !important. */
body.bsa-skin :is(.btn-primary,a.btn-primary,button.btn-primary,
  .cta-primary,a.cta-primary,button.cta-primary,
  .start-button,a.start-button,button.start-button,
  .stage-btn,a.stage-btn,
  .btn,a.btn):not(.btn-danger):not(.btn-warning):not(.btn-success):not(.btn-error):hover {
  background: rgba(255,122,0,.12) !important;
  border-color: var(--bsa-accent) !important;
}
/* Skip-link focus chip: dark text on the orange chip (white was 2.6:1) */
body.bsa-skin .skip-link:focus {
  color: #101010 !important;
  -webkit-text-fill-color: #101010 !important;
}
/* Locked/disabled stage CTAs -> muted, clearly inactive (never orange-on-gray).
   Repeated class bumps specificity past the restrained rule's :not() chain. */
body.bsa-skin.bsa-skin.bsa-skin.bsa-skin :is(.stage-card.locked,.locked,[aria-disabled="true"]) :is(.stage-btn,a.stage-btn) {
  background: transparent !important;
  border-color: var(--bsa-border) !important;
  color: var(--bsa-text-muted) !important;
  -webkit-text-fill-color: var(--bsa-text-muted) !important;
}

/* Accent titles -> orange→yellow gradient fade, SMALLER + tighter.
   Only real headings (h1/h2/h3), NOT card-item labels like .example-title. */
body.bsa-skin :is(h1,h2,h3):not(.bsa-subtitle):not([class*="subtitle"]) {
  background: var(--bsa-grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--bsa-accent);
  font-size: clamp(1.2rem, 2.2vw, 1.6rem) !important;
  line-height: 1.2 !important;
  margin-bottom: 0.6rem !important;
}
/* Card-item labels (divs, not headings) -> white, never the gradient/orange. */
body.bsa-skin :is([class*="-title"],[class*="-name"],[class*="-label"],[class*="-cost"],[class*="-value"]):not(h1):not(h2):not(h3) {
  background: none !important;
  color: var(--bsa-text) !important;
  -webkit-text-fill-color: var(--bsa-text) !important;
}

/* Tighter space + flat surfaces (kill faint tint/gradient card backgrounds).
   MUST exclude text elements: a heading/label whose class contains "section"
   (e.g. .section-title) would otherwise get background-image:none, killing the
   gradient on its clipped text and rendering it INVISIBLE. Containers only. */
body.bsa-skin :is(.cta-section,.intro-section,.stages-section,.next-week,
  [class*="section"],[class*="card"],[class*="box"]):not(h1):not(h2):not(h3):not([class*="-title"]):not([class*="-name"]):not([class*="-label"]):not([class*="-number"]) {
  padding: 1.25rem 1.5rem !important;
  background-image: none !important;
}
body.bsa-skin .header { margin-bottom: 1rem !important; }
body.bsa-skin .container { max-width: 1140px !important; }

/* Boundary note (TBA conflict rule, 2026-06-10): education-not-advice
   disclaimer on custody-adjacent pages. Works without bsa-skin. */
.bsa-boundary-note{background:#101010;border:1px solid #2a2a2a;border-left:3px solid #f59e0b;
  border-radius:10px;padding:1rem 1.25rem;margin:2rem auto;max-width:860px;
  color:#b3b3b3;font-size:.92rem;line-height:1.55;font-family:Inter,-apple-system,sans-serif}
.bsa-boundary-note strong{color:#F7F7F2}
.bsa-boundary-note a{color:#FF9A00;text-decoration:underline}