/* =====================================================================
   FOOTPRINT — DESIGN TOKENS
   Broadcast Media Africa event sites
   Version 1.0 · September 2026

   HOW THIS WORKS
   Set two attributes on <html> and every colour on the page follows:

     <html data-event="sab" data-stream="dark">

   data-event   one of: css | ngr | rad | eab | sfm | wab | sab | bma
   data-stream  dark (default) | light

   Never write a colour literal in component CSS. Every component reads
   from the tokens below. That is what allows one build to serve eight
   event sites.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. GLOBAL TOKENS — identical on every event site. Do not fork these.
   --------------------------------------------------------------------- */
:root {
  /* --- Typefaces -------------------------------------------------- */
  --font-display: "Bricolage Grotesque", "DM Sans", system-ui, sans-serif;
  --font-text: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;

  /* --- Type scale -------------------------------------------------
     Display sizes are fluid. Text sizes are fixed.                   */
  --t-hero: clamp(2.375rem, 7vw, 5.25rem); /* h1, hero only     */
  --t-h2: clamp(1.625rem, 3.9vw, 2.6875rem); /* section headings  */
  --t-h3: 1.625rem; /* card headings     */
  --t-lead: clamp(1rem, 2vw, 1.25rem); /* hero standfirst   */
  --t-body-lg: 1.0625rem; /* section intros    */
  --t-body: 0.9375rem; /* default text      */
  --t-small: 0.84375rem; /* card captions     */
  --t-label: 0.65625rem; /* uppercase labels  */

  --lh-display: 0.95;
  --lh-heading: 1.04;
  --lh-text: 1.6;

  --ls-display: -0.035em;
  --ls-heading: -0.03em;
  --ls-label: 0.15em;

  --w-regular: 400;
  --w-medium: 500;
  --w-bold: 700;
  --w-black: 800; /* hero and register heading only */

  /* --- Spacing scale (8px base) ----------------------------------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.375rem;
  --sp-6: 2rem;
  --sp-7: 2.75rem;
  --sp-8: 4rem;

  /* Vertical rhythm between page sections */
  --sec-y: clamp(2.875rem, 6.5vw, 5.375rem);

  /* --- Layout ------------------------------------------------------ */
  --container: 1140px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --measure: 56ch; /* max width for running text */

  /* --- Motion ------------------------------------------------------ */
  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
  --dur-fast: 140ms;
  --dur-base: 240ms;

  /* --- Elevation --------------------------------------------------- */
  /* Footprint uses borders, not shadows. One shadow only, for the
     sticky header once the page has scrolled.                        */
  --shadow-header: 0 10px 30px -22px rgba(0, 0, 0, 0.85);
}

/* ---------------------------------------------------------------------
   2. EVENT TOKENS
   Each event defines: 4 surface/text tokens, 2 line tokens,
   4 accent tokens, a radius and a motif name.

   --ground      page background
   --surf        cards, bands, inputs
   --ink         primary text
   --mute        secondary text (must clear 4.5:1 on --ground)
   --line        hairline borders
   --accent      graphics, motif strokes, active states
   --accent-ink  text-safe accent (eyebrows, links, countdown)
   --pop         primary action fill
   --pop-ink     text on --pop
   --r           base corner radius
   --motif       hero motif, read by the canvas script
   --hero-wash   fallback gradient behind the hero photograph
   --------------------------------------------------------------------- */

/* ===== CSS · Content Streaming Summit — Africa ======================= */
[data-event="css"] {
  --ground: #14121c;
  --surf: #211d2e;
  --ink: #f3eff7;
  --mute: #a199b4;
  --line: rgba(243, 239, 247, 0.11);
  --accent: #f2557e;
  --accent-ink: #ff7a9c;
  --pop: #ffc94a;
  --pop-ink: #2e1f00;
  --hero-wash: linear-gradient(158deg, #33224a, #14121c 74%);
  --r: 26px;
  --motif: stream;
}
[data-event="css"][data-stream="light"] {
  --ground: #f5f2f7;
  --surf: #ffffff;
  --ink: #1b1526;
  --mute: #655c78;
  --line: rgba(27, 21, 38, 0.12);
  --accent: #d6376a;
  --accent-ink: #b62553;
  --pop: #a36200;
  --pop-ink: #fff8e8;
  --hero-wash: linear-gradient(158deg, #e4d7ee, #f5f2f7 74%);
}

/* ===== NGR · Broadcasters Convention — Nigeria ====================== */
[data-event="ngr"] {
  --ground: #08170f;
  --surf: #0f2a1d;
  --ink: #edf5ee;
  --mute: #8fae9c;
  --line: rgba(237, 245, 238, 0.11);
  --accent: #2ed08a;
  --accent-ink: #3fe39a;
  --pop: #ffb020;
  --pop-ink: #2b1b00;
  --hero-wash: linear-gradient(158deg, #14432e, #08170f 74%);
  --r: 14px;
  --motif: cells;
}
[data-event="ngr"][data-stream="light"] {
  --ground: #f1f6f1;
  --surf: #ffffff;
  --ink: #0c2418;
  --mute: #546b5c;
  --line: rgba(12, 36, 24, 0.12);
  --accent: #0e8c5c;
  --accent-ink: #0a6e48;
  --pop: #a36000;
  --pop-ink: #fff6e4;
  --hero-wash: linear-gradient(158deg, #d6e9dc, #f1f6f1 74%);
}

/* ===== RAD · Radio Broadcasters Summit — Africa ===================== */
[data-event="rad"] {
  --ground: #17120a;
  --surf: #26200f;
  --ink: #f6eedc;
  --mute: #b0a183;
  --line: rgba(246, 238, 220, 0.11);
  --accent: #e8b13f;
  --accent-ink: #f2be52;
  --pop: #e0553b;
  --pop-ink: #2a0a04;
  --hero-wash: linear-gradient(158deg, #463714, #17120a 74%);
  --r: 12px;
  --motif: waves;
}
[data-event="rad"][data-stream="light"] {
  --ground: #f8f3e7;
  --surf: #ffffff;
  --ink: #1e1708;
  --mute: #6b5f45;
  --line: rgba(30, 23, 8, 0.13);
  --accent: #a97a0b;
  --accent-ink: #8a6205;
  --pop: #c4341a;
  --pop-ink: #fff1ee;
  --hero-wash: linear-gradient(158deg, #ebddbc, #f8f3e7 74%);
}

/* ===== EAB · Broadcasters Convention — East Africa ================== */
[data-event="eab"] {
  --ground: #0a1024;
  --surf: #151e3c;
  --ink: #efeff6;
  --mute: #94a0c0;
  --line: rgba(239, 239, 246, 0.11);
  --accent: #f0a32e;
  --accent-ink: #ffb646;
  --pop: #3668dd;
  --pop-ink: #f2f6ff;
  --hero-wash: linear-gradient(158deg, #1d2a57, #0a1024 74%);
  --r: 18px;
  --motif: footprint;
}
[data-event="eab"][data-stream="light"] {
  --ground: #f2f3f8;
  --surf: #ffffff;
  --ink: #111731;
  --mute: #5a6284;
  --line: rgba(17, 23, 49, 0.12);
  --accent: #b36f05;
  --accent-ink: #8f5800;
  --pop: #2b57c9;
  --pop-ink: #f2f6ff;
  --hero-wash: linear-gradient(158deg, #d9ddec, #f2f3f8 74%);
}

/* ===== SFM · Studios and Facilities Management Forum ================ */
[data-event="sfm"] {
  --ground: #111316;
  --surf: #1c1f24;
  --ink: #eceef0;
  --mute: #909aa3;
  --line: rgba(236, 238, 240, 0.12);
  --accent: #ff5c2b;
  --accent-ink: #ff7448;
  --pop: #9fb2bd;
  --pop-ink: #12171a;
  --hero-wash: linear-gradient(158deg, #2a3037, #111316 74%);
  --r: 6px;
  --motif: lattice;
}
[data-event="sfm"][data-stream="light"] {
  --ground: #f0f0ee;
  --surf: #ffffff;
  --ink: #14181b;
  --mute: #5c646b;
  --line: rgba(20, 24, 27, 0.13);
  --accent: #d8410f;
  --accent-ink: #b23409;
  --pop: #3f5560;
  --pop-ink: #f3f7f9;
  --hero-wash: linear-gradient(158deg, #daddde, #f0f0ee 74%);
}

/* ===== WAB · Broadcasters Convention — West Africa ================== */
[data-event="wab"] {
  --ground: #1a1108;
  --surf: #2b1e10;
  --ink: #f8efdf;
  --mute: #b7a184;
  --line: rgba(248, 239, 223, 0.11);
  --accent: #e8b33c;
  --accent-ink: #f4c155;
  --pop: #2fa9a0;
  --pop-ink: #02241f;
  --hero-wash: linear-gradient(158deg, #4a3416, #1a1108 74%);
  --r: 18px;
  --motif: cells;
}
[data-event="wab"][data-stream="light"] {
  --ground: #faf4e8;
  --surf: #ffffff;
  --ink: #221708;
  --mute: #6e5f46;
  --line: rgba(34, 23, 8, 0.13);
  --accent: #a87c10;
  --accent-ink: #8a6405;
  --pop: #0b7268;
  --pop-ink: #effaf8;
  --hero-wash: linear-gradient(158deg, #eedfc0, #faf4e8 74%);
}

/* ===== SAB · Broadcasters Convention — Southern Africa ============== */
[data-event="sab"] {
  --ground: #04191f;
  --surf: #0c333c;
  --ink: #f2e9d8;
  --mute: #93aeb1;
  --line: rgba(242, 233, 216, 0.11);
  --accent: #4fe0be;
  --accent-ink: #5fe9c9;
  --pop: #ff7150;
  --pop-ink: #2a0b03;
  --hero-wash: linear-gradient(158deg, #0b3e49, #04191f 74%);
  --r: 20px;
  --motif: footprint;
}
[data-event="sab"][data-stream="light"] {
  --ground: #f1eee5;
  --surf: #ffffff;
  --ink: #0a2129;
  --mute: #556a6e;
  --line: rgba(10, 33, 41, 0.12);
  --accent: #0e9c81;
  --accent-ink: #087964;
  --pop: #cc3913;
  --pop-ink: #fff2ee;
  --hero-wash: linear-gradient(158deg, #cfe3e1, #f1eee5 74%);
}

/* ===== BMA · Broadcast Media Awards ================================= */
[data-event="bma"] {
  --ground: #0c0b10;
  --surf: #191721;
  --ink: #f5f1e6;
  --mute: #9e97ac;
  --line: rgba(245, 241, 230, 0.12);
  --accent: #d9b65e;
  --accent-ink: #e5c674;
  --pop: #b34a6a;
  --pop-ink: #fff0f4;
  --hero-wash: linear-gradient(158deg, #2a2333, #0c0b10 74%);
  --r: 30px;
  --motif: burst;
}
[data-event="bma"][data-stream="light"] {
  --ground: #f5f3ee;
  --surf: #ffffff;
  --ink: #17141c;
  --mute: #61596b;
  --line: rgba(23, 20, 28, 0.12);
  --accent: #9a7a1c;
  --accent-ink: #7d6212;
  --pop: #9c2f4e;
  --pop-ink: #fff0f4;
  --hero-wash: linear-gradient(158deg, #e2ddd0, #f5f3ee 74%);
}

/* ---------------------------------------------------------------------
   3. DERIVED TOKENS
   Radius steps derive from --r so the shape language stays consistent
   when an event's radius changes.
   --------------------------------------------------------------------- */
:root {
  --r-xs: calc(var(--r, 20px) * 0.16); /* logo mark inner        */
  --r-sm: calc(var(--r, 20px) * 0.42); /* logo mark, small chips */
  --r-md: calc(var(--r, 20px) * 0.6); /* fact pills, inputs     */
  --r-lg: calc(var(--r, 20px) * 0.8); /* session cards          */
  --r-xl: var(--r, 20px); /* focus cards, images    */
  --r-2xl: calc(var(--r, 20px) * 1.3); /* register panel         */
  --r-pill: 999px; /* buttons, day tabs      */
}

/* ---------------------------------------------------------------------
   4. STREAM DEFAULT
   Dark is the default. If you want the visitor's OS preference to pick
   the stream instead, remove data-stream from the markup and uncomment:

   @media (prefers-color-scheme: light) {
     html:not([data-stream]) { ... light tokens ... }
   }

   Do not do both. One source of truth for the stream.
   --------------------------------------------------------------------- */