/*
 * CFH Broadcast — Design Tokens
 * Single source of truth for colours, fonts, spacing.
 * Sourced from the Brand Bible (bible-primitives.jsx).
 * Edit ONLY here — every other file references via var(--token).
 */
:root {
  /* ----------- COLOUR ----------- */
  --cfh-ink:        #0E0E0C;   /* primary text + borders */
  --cfh-cream:      #EDE8DF;   /* page background */
  --cfh-paper:      #F5F1EA;   /* card / inset surfaces */
  --cfh-magenta:    #E5187C;   /* accent · problem · emphasis */
  --cfh-green:      #00C26B;   /* signal · delivered · solution */
  --cfh-dim:        #6B6B6B;   /* muted / metadata text */
  --cfh-rule:       #0E0E0C;   /* dividers (use with low opacity) */

  /* alpha overlays for borders / dividers */
  --cfh-ink-25:     rgba(14,14,12,.25);
  --cfh-ink-20:     rgba(14,14,12,.20);
  --cfh-cream-25:   rgba(237,232,223,.25);

  /* ----------- TYPE ----------- */
  --cfh-font-display: "Archivo", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --cfh-font-body:    "Archivo", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --cfh-font-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  /* No serif on the brand — italic accents use Archivo italic instead. */
  --cfh-font-serif:   "Archivo", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

  /* ----------- TYPE SCALE ----------- */
  --cfh-fs-display-xl: clamp(48px, 8vw, 120px);   /* hero headline — only place this size lives */
  --cfh-fs-display-l:  clamp(32px, 4.4vw, 64px);  /* section H2 — reduced 29 Apr per Coop: hero should dominate, sections lighter */
  --cfh-fs-display-m:  clamp(36px, 4vw, 56px);    /* subsection */
  --cfh-fs-display-s:  clamp(24px, 3vw, 36px);    /* card title */

  --cfh-fs-body-xl: 22px;  /* lede */
  --cfh-fs-body-l:  18px;  /* prose default */
  --cfh-fs-body-m:  16px;  /* card body */
  --cfh-fs-body-s:  14px;  /* meta */

  --cfh-fs-mono-l: 14px;
  --cfh-fs-mono-m: 12.5px;
  --cfh-fs-mono-s: 11px;

  /* ----------- SPACING ----------- */
  --cfh-space-1: 4px;
  --cfh-space-2: 8px;
  --cfh-space-3: 12px;
  --cfh-space-4: 16px;
  --cfh-space-5: 24px;
  --cfh-space-6: 32px;
  --cfh-space-7: 48px;
  --cfh-space-8: 64px;
  --cfh-space-9: 96px;
  --cfh-space-10: 120px;

  /* ----------- LAYOUT ----------- */
  --cfh-content-max: 1180px;     /* main container */
  --cfh-prose-max: 760px;        /* body prose readability cap */
  --cfh-edge: clamp(20px, 4vw, 64px);  /* horizontal page padding */

  /* ----------- MOTION ----------- */
  --cfh-ease: cubic-bezier(.22,.61,.36,1);
  --cfh-dur-fast: 120ms;
  --cfh-dur-norm: 240ms;
}

/* HIGH CONTRAST mode (toolbar + prefers-contrast) */
@media (prefers-contrast: more) {
  :root {
    --cfh-cream: #FFFFFF;
    --cfh-ink: #000000;
    --cfh-magenta: #C00060;
    --cfh-green: #008C4A;
    --cfh-dim: #333333;
  }
}
.cfh-high-contrast {
  --cfh-cream: #FFFFFF;
  --cfh-ink: #000000;
  --cfh-magenta: #C00060;
  --cfh-green: #008C4A;
  --cfh-dim: #333333;
}

/* DARK mode toggle (toolbar) — invert ink/cream */
.cfh-dark {
  --cfh-cream: #0E0E0C;
  --cfh-paper: #1A1916;
  --cfh-ink: #EDE8DF;
  --cfh-rule: #EDE8DF;
  --cfh-dim: #9C9C9C;
}

/* TEXT-SIZE override (toolbar) — multiplies all clamp() bases */
.cfh-text-size-l  { font-size: 112.5%; }   /* L */
.cfh-text-size-xl { font-size: 125%; }     /* XL */

/* DYSLEXIA-FRIENDLY font (toolbar) */
.cfh-dyslexia,
.cfh-dyslexia * {
  font-family: "OpenDyslexic", "Comic Sans MS", system-ui, sans-serif !important;
  letter-spacing: 0.04em;
  word-spacing: 0.16em;
  line-height: 1.6;
}

/* LOW BANDWIDTH mode (toolbar) — strip imagery + decorative bg */
.cfh-low-bw img,
.cfh-low-bw video,
.cfh-low-bw [data-decorative] { display: none !important; }
.cfh-low-bw {
  --cfh-font-display: system-ui, sans-serif;
  --cfh-font-body: system-ui, sans-serif;
  --cfh-font-mono: ui-monospace, monospace;
  --cfh-font-serif: system-ui, sans-serif;
}

/* MOTION OFF (toolbar) and prefers-reduced-motion */
.cfh-no-motion *,
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}