:root {
  /* ----------------------------------------------------------------
     Brand colours — these are CONSTANTS. They never theme-switch.
     Use them when a value is brand-locked (logo teal, ember CTA,
     fixed-tone category swatches). For everything that paints page
     surfaces, prefer the semantic tokens further down.
     ---------------------------------------------------------------- */
  --ink-blue:      #1F8FB0;
  --ink-blue-deep: #0E5A75;
  --ink-blue-tint: #A2CDD5;
  --brand-blue:    #3FB5D6;
  --paper:         #FAF7EE;
  --ink:           #1A1814;
  --ember:         #D9531E;

  /* Blue-family tones (Variant B) — used as fixed bg colours by the
     eight category cards. Theme-invariant. */
  --b1: #061B26; --b2: #0A2C3D; --b3: #144A5E; --b4: #15728F;
  --b5: #1F8FB0; --b6: #3FB5D6; --b7: #6FCAE0; --b8: #A2CDD5; --b9: #CFE6EC;

  /* Always-locked greyscale — pinned to brand paper/ink for surfaces
     that pair with a brand-locked colour (tone cards, ember CTA,
     b-palette step cards). NEVER theme-overridden. */
  --always-light: #FAF7EE;
  --always-ink:   #1A1814;

  /* ----------------------------------------------------------------
     Semantic surface + text tokens — these CAN be theme-overridden
     in themes.css. CSS files should consume these for any surface or
     text colour that should follow the chosen palette.
     The values below are the Paper (default) palette.
     ---------------------------------------------------------------- */

  /* Surfaces */
  --surface-base:    #FAF1DF;   /* page bg — header, footer, body */
  --surface-section: #E8DEC8;   /* alt section bg — sponsors, cta, about-card */
  --surface-soft:    #F2E9D5;   /* tonal break section — past winners */
  --surface-card:    #FFFFFF;   /* paper card surfaces — winner card, logo wells, form */

  /* Text */
  --text-base:    #1A1814;      /* on --surface-base */
  --text-section: #1A1814;      /* on --surface-section */
  --text-soft:    #1A1814;      /* on --surface-soft */
  --text-card:    #1A1814;      /* on --surface-card */

  /* Accents */
  --accent-primary:    #0E5A75; /* eyebrows, em, links, hover, focus ring */
  --accent-deep:       #0E5A75; /* secondary accent — hero ems */
  --accent-warm:       #D9531E; /* ember — used for CTA backgrounds (theme-stable) */
  --accent-warm-text:  #9F3D14; /* warm-text role — small uppercase labels on page bg.
                                   Theme-aware: lighter shade on dark themes, darker on
                                   light themes — picks up enough contrast everywhere. */
  --ember-text:        #0A0805; /* near-black text on ember CTAs (theme-invariant —
                                   ember bg is fixed, so 4.96:1 here clears AA) */

  /* Muted text — pre-blended swap-ins for what was opacity dimming.
     Paper defaults shown; themes.css overrides per palette so each
     resolved colour clears 4.5:1 on its surface without an alpha pass. */
  --text-base-muted:    #4B4841;
  --text-section-muted: #47443C;

  /* Borders — ink-tinted alphas on light themes; paper-tinted on dark */
  --border-subtle: rgba(26, 24, 20, 0.10);
  --border-medium: rgba(26, 24, 20, 0.20);
  --border-strong: rgba(26, 24, 20, 0.30);

  /* Type scale */
  --fs-base: 18px;
  --fs-lh: 1.65;
  --fs-tracking: 0.01em;
  --fs-h1-hero: 88px;
  --fs-h1-page: 72px;
  --fs-h2-section: 56px;
  --fs-h2-block: 40px;
  --fs-card: 28px;
  --fs-eyebrow: 12px;

  /* Spacing */
  --measure: 65ch;
  --section-pad-y: 96px;
  --section-pad-x: 80px;
  --frame-max: 1440px;
  --motion-fast: 200ms;

  /* Default font — Lexend everywhere. The Dyslexie Font plugin (when
     active) overrides via its own CSS to swap to Dyslexie. */
  --font-stack: "Lexend", system-ui, sans-serif;
}