/* ============================================================
   UK Broker Support — Colour tokens
   Locked palette (finalised 2026-06-24).
   Roles: 80% cream surfaces / charcoal = ink + dark structural sections /
   burnt orange = PRIMARY accent (hero bg, section labels, display numbers,
   proposal title slides; not a CTA at this prominence) /
   olive = 5% micro-accent = the single CTA button / aqua = tint washes only.

   CONTRAST RULE: burnt orange and olive NEVER appear as text-on-background
   against each other. Each requires cream or charcoal as its base.
   OK: orange-on-cream, orange-on-charcoal, olive-on-cream, olive-on-charcoal.
   NEVER: orange-on-olive, olive-on-orange.
   ============================================================ */
:root {
  /* --- Base palette --- */
  --cream: #F6F1E8;        /* 80% dominant background */
  --cream-tint: #F0EBE0;   /* alt section background (What I do) */
  --charcoal: #2A241E;     /* master ink — all body & headings */
  --olive: #5D621C;        /* 5% micro-accent — the single CTA button only */
  --aqua: #8EC6D8;         /* whisper accent — prefer --aqua-tint; full aqua = rare trust labels */
  --orange: #C46A3D;       /* burnt orange — PRIMARY accent: hero bg, labels, display numbers, title slides */

  /* --- Tonal support (derived, for borders / hovers / states) --- */
  --charcoal-80: #46403A;  /* softened ink, captions on cream */
  --charcoal-60: #6C6760;  /* muted ink — use sparingly, large only */
  --olive-dark: #4D5117;   /* olive hover / pressed */
  --olive-tint: #ECEDD6;   /* pale olive wash / chip fill on cream */
  --orange-dark: #A9572F;  /* orange hover / pressed */
  --orange-line: #D2855C;  /* hairline borders on burnt orange */
  --orange-tint: #F3DFD2;  /* pale burnt-orange wash / decorative chip fill on cream */
  --charcoal-line: #3A332C; /* hairline borders / dividers on charcoal sections */
  --aqua-tint: #DCEEF3;    /* pale aqua wash (lead-magnet section) */
  --cream-line: #E2DACB;   /* hairline borders on cream */
  --olive-line: #97A04A;   /* hairline borders on olive */
  --orange-on-cream-text: #9B502C; /* darker burnt orange — AA-safe for small/bold text on cream */
  --orange-on-dark-text: #CB7B53;  /* lightened burnt orange — AA-safe for small/bold text on charcoal */

  /* --- Semantic aliases --- */
  --surface-page: var(--cream);
  --surface-alt: var(--cream-tint);
  --surface-dark: var(--charcoal);   /* structural dark sections — Problem panel, footer */
  --surface-feature: var(--orange);  /* the one burnt-orange full-bleed + founder hero accent */
  --surface-card: #FBF8F2;       /* slightly lifted card on cream */
  --surface-input: var(--cream);
  --surface-accent-wash: var(--aqua-tint);  /* aqua whispers as a wash, not a fill */

  --text-primary: var(--charcoal);
  --text-secondary: var(--charcoal-80);
  --text-muted: var(--charcoal-60);
  --text-on-dark: var(--cream);
  --text-on-feature: var(--cream);   /* text on the burnt-orange feature surface */
  --text-display: var(--orange);     /* display numbers & accent headings on cream/charcoal */
  --text-link: var(--orange-on-cream-text); /* WCAG AA compliant on cream */

  --border-default: var(--cream-line);
  --border-strong: var(--charcoal);
  --border-on-dark: var(--charcoal-line);
  --border-on-feature: var(--orange-line);
  --ink-hairline: color-mix(in srgb, var(--charcoal) 12%, transparent); /* faint section-divider rule */

  --accent: var(--orange);        /* PRIMARY accent */
  --accent-quiet: var(--aqua);    /* whisper only — prefer the wash */
  --cta: var(--olive);            /* the single CTA button (sits on charcoal/cream) */
  --cta-hover: var(--olive-dark);
  --cta-text: var(--cream);

  --focus-ring: #2A241E;
}