/* ============================================================
   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;
}

/* ============================================================
   Dark mode — system-preference only, no toggle, no stored choice.
   Sampled from Firefox's dark-reader pass on the live site, then
   reviewed for WCAG 2.1 AA against every pairing actually used
   in content/assets/css. Ratios verified 2026-07-10; see
   Claude Design project "Dark mode design system review" for the
   full working (extracted swatches, live mockup, accessibility read).

   --charcoal and --cream each carry two roles in light mode (ink
   AND surface) because both roles happen to want the same value
   there. Dark mode splits them: --charcoal/--cream stay the
   *surface* tokens; --text-primary/--text-on-dark/--text-on-feature
   are overridden directly rather than left as var(--charcoal) /
   var(--cream) aliases, so ink doesn't go dark-on-dark. Same split
   for --orange: the base token stays a small-text/icon/stroke-safe
   brightened orange (#E0895A, 5.7–6.5:1 on every dark surface
   tested); --surface-feature and --orange-dark carry the separate,
   less-saturated large-fill orange (#8B4A28) that only needs to
   clear 3:1 with light text on top, and which "vibrates" at full
   saturation on dark per the design review.
   ============================================================ */
@media (prefers-color-scheme: dark) {
  :root {
    /* --- Base palette --- */
    --cream: #2E2415;        /* was the 80% light surface; now the dark page bg (warm brown, not neutral grey) */
    --cream-tint: #362A18;   /* alt section background, one step lighter than the page */
    --charcoal: #1E1A15;     /* stays the darkest structural surface tone */
    --olive: #4A4A14;
    --aqua: #8EC6D8;         /* unchanged — already reads 7–8:1 on every dark surface tested */
    --orange: #E0895A;       /* brightened — safe for small text/icons/strokes on dark (5.7–6.5:1) */

    /* --- Tonal support --- */
    --charcoal-80: #C9C2B0;  /* secondary text on dark (8.6–9.7:1) */
    --charcoal-60: #A79C86;  /* muted text on dark (5.6–6.4:1) */
    --olive-dark: #5C5C1A;   /* lightened for hover feedback on dark — not part of the reviewed set, derived to match the existing hover pattern */
    --olive-tint: color-mix(in srgb, var(--olive) 25%, var(--cream));
    --orange-dark: #8B4A28;  /* the large-fill orange (contact section) */
    --orange-line: rgba(237, 230, 214, 0.4);
    --orange-tint: color-mix(in srgb, var(--orange) 18%, var(--cream));
    --charcoal-line: rgba(237, 230, 214, 0.14);
    --aqua-tint: #123138;
    --cream-line: rgba(237, 230, 214, 0.14);
    --olive-line: color-mix(in srgb, var(--olive) 55%, var(--cream));
    --orange-on-cream-text: #E0895A; /* AA-safe orange, page-bg context */
    --orange-on-dark-text: #E0895A;  /* AA-safe orange, structural-dark context — same value; dark mode no longer needs two */

    /* --- Semantic aliases that diverge from a simple base-token swap --- */
    --surface-feature: #8B4A28;      /* decoupled from --orange so full-bleed fills stay muted while text/icons stay bright */
    --surface-card: #241D16;         /* elevated card sits darker than the page, mirroring the light-mode lift inverted */
    --text-primary: #EDE6D6;         /* decoupled from --charcoal — ink flips light, surface stays dark */
    --text-on-dark: #EDE6D6;
    --text-on-feature: #EDE6D6;
    --focus-ring: #EDE6D6;           /* decoupled from --charcoal — a dark ring would be invisible on dark surfaces */
    --ink-hairline: color-mix(in srgb, var(--text-primary) 12%, transparent); /* derive from ink, not the now-dark --charcoal */
    --cta-text: #EDE6D6;             /* decoupled from --cream — button text was landing dark-on-olive without this (7.4:1 tested) */
    --border-strong: #EDE6D6;        /* decoupled from --charcoal — dormant today, but would be invisible on dark surfaces as-aliased */
  }
}