/* =====================================================================================================
   MDXW site v3 · tokens.css · the single source of truth for design/site-v3
   Owner: Lomi Artemisia G. · 2026-11-06 (softer fields, vivid accents, stone kept)

   PALETTE RATIONALE
   Wise's two-tone method: every colored section is a FIELD printed with its own same-family INK. Type,
   rules, buttons and logo all take that ink; never black or white on color.
   Three groups, three jobs:
     (a) ANCHOR fields   cobalt, teal, navy. Deep, calm, carry heroes, bands and the footer.
     (b) SOFT fields     paper, stone and light tints of sky, aqua, sun, leaf and tangerine. Large panels.
     (c) VIVID accents   sky, aqua, sun, leaf, tangerine, rose. Saturated, each with its own ink. Small things
                         only: buttons, chips, marks, rules, links, small cards. Never a section field.
   Polarity flips from section to section. Paper is a breather, stone is the quiet default. Pink (rose) is
   an accent only. All pairs pass WCAG AA; most pass AAA (ratios below are WCAG 2, computed; system.html
   recomputes them live and flags any comment that drifts).
   ===================================================================================================== */
/* ---------- (a) ANCHOR fields: dark field, pale ink ---------- */
/* ---------- fonts: the Geist family, self-hosted (SIL OFL, fonts/OFL.txt) ---------- */
@font-face{font-family:"Newsreader";src:url(fonts/Newsreader-latin-ext.woff2) format("woff2");font-weight:200 800;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Newsreader";src:url(fonts/Newsreader-latin.woff2) format("woff2");font-weight:200 800;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Geist";src:url(fonts/Geist-Variable.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Geist Serif";src:url(fonts/GeistSerif-Variable.woff2) format("woff2");font-weight:400;font-variation-settings:"ELSH" 0;font-style:normal;font-display:swap}
@font-face{font-family:"Geist Mono";src:url(fonts/GeistMono-Variable.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Geist Pixel";src:url(fonts/GeistPixel-Variable.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

:root{
  --cobalt-field:#2442B8;  --cobalt-ink:#EBF0FF;   /* 7.24:1  the community, home hero        */
  --teal-field:#0D474D;    --teal-ink:#DCEBEC;     /* 8.46:1  the anchor, the conference      */
  --navy-field:#15233E;    --navy-ink:#DCE5F5;     /* 12.35:1 depth, footer                   */
  /* ---------- (b) SOFT fields: light field, deep ink ---------- */
  --paper-field:#F6F3EC;   --paper-ink:#16233D;    /* 14.12:1 warm paper, navy ink            */
  --stone-field:#E6E0D2;   --stone-ink:#2C2719;    /* 11.31:1 warm quiet neutral, the background tone */
  --sky-soft-field:#DDE8F6;       --sky-soft-ink:#0F2A5C;       /* 11.25:1 powder blue: sign-up, forms */
  --aqua-soft-field:#D8EEE9;      --aqua-soft-ink:#0B3B38;      /* 10.21:1 */
  --sun-soft-field:#F7ECC9;       --sun-soft-ink:#3A2A00;       /* 11.78:1 the event beat, softly */
  --leaf-soft-field:#E2EED4;      --leaf-soft-ink:#1B3512;      /* 11.13:1 */
  --tangerine-soft-field:#F9E3D2; --tangerine-soft-ink:#4A1F05; /* 11.38:1 */
  /* ---------- (c) VIVID accents: small elements only; each fill has its own ink ---------- */
  --sky-vivid:#7DB2FF;       --sky-vivid-ink:#0A2468;       /* 6.61:1 */
  --aqua-vivid:#4FD1BC;      --aqua-vivid-ink:#043A36;      /* 6.72:1 */
  --sun-vivid:#FFCB3D;       --sun-vivid-ink:#2E1F00;       /* 10.56:1 */
  --leaf-vivid:#8FD66A;      --leaf-vivid-ink:#0E3009;      /* 8.30:1 */
  --tangerine-vivid:#FF8F3F; --tangerine-vivid-ink:#3A1600; /* 7.15:1 */
  --rose-vivid:#F0A4A0;      --rose-vivid-ink:#3F0F0C;      /* 8.19:1 */
  --rose:var(--rose-vivid);  /* footer dot */

  /* ---------- type ---------- */
  --font-serif:"Newsreader", ui-serif, Georgia, serif;
  --font-geist-serif:"Geist Serif", ui-serif, Georgia, serif;
  --font-sans:"Geist", "Helvetica Neue", Arial, sans-serif;
  --font-mono:"Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-pixel:"Geist Pixel", "Geist Mono", monospace;
  --dw:500;                                /* headline weight: Newsreader 500; Geist Serif has one weight (400); sans 580 */
  --font-display:var(--font-serif);       /* headlines: serif by default; the settings footer switches to sans */
  --title-size:clamp(40px, 5.2vw, 72px);  --title-lh:1.02;  --title-track:-.022em;
  --h2-size:clamp(28px, 3vw, 42px);       --h2-lh:1.1;      --h2-track:-.015em;
  --statement-size:clamp(22px, 2vw, 28px); --statement-lh:1.32;
  --h3-size:clamp(19px, 1.5vw, 22px);     --h3-lh:1.25;
  --lead-size:clamp(18px, 1.5vw, 21px);   --lead-lh:1.45;
  --copy-size:17px; --copy-lh:1.6;  --measure:62ch;
  --small-size:15px; --small-lh:1.45;
  --label-size:12px; --label-track:.11em;
  --display-size:clamp(34px, 4vw, 56px);   /* feature names, partner heading, milestone years */
  --figure-size:clamp(40px, 4.4vw, 60px);  /* counted figures                                 */
  --title-long-size:clamp(30px, 8vw, 64px);/* titles with a long word, so it fits on a phone  */
  --ui-size:16px;       /* buttons, nav, inputs */
  --ui-small-size:14px; /* sub-nav, form labels, footer base, meta */

  /* ---------- space + grid ---------- */
  --gutter:clamp(20px, 4.4vw, 64px);
  --container:1240px;
  --col-gap:24px;
  --pad:clamp(64px, 8vw, 112px);
  --pad-tight:clamp(28px, 3vw, 40px);

  /* ---------- shape ---------- */
  --radius-photo:6px; --radius-pill:999px; --radius-tile:4px;
  --line:1.5px;  /* ink rule that opens a list, table or button outline */
  --hair:1px;    /* --rule hairline between rows                         */

  /* ---------- motion: calm reveals only ---------- */
  --dur:380ms; --dur-fast:160ms;
  --ease:cubic-bezier(.2,0,0,1);
  --reveal-shift:14px;
}
@media (prefers-reduced-motion: reduce){
  :root{--dur:0ms;--dur-fast:0ms;--reveal-shift:0px}
}

/* ---------- pair classes: each sets field + ink + the section's accent (--acc / --acc-ink) ---------- */
.f-cobalt{--field:var(--cobalt-field);--ink:var(--cobalt-ink);--acc:var(--sun-vivid);--acc-ink:var(--sun-vivid-ink)}
.f-teal{--field:var(--teal-field);--ink:var(--teal-ink);--acc:var(--aqua-vivid);--acc-ink:var(--aqua-vivid-ink)}
.f-navy{--field:var(--navy-field);--ink:var(--navy-ink);--acc:var(--sun-vivid);--acc-ink:var(--sun-vivid-ink)}
.f-paper{--field:var(--paper-field);--ink:var(--paper-ink);--acc:var(--tangerine-vivid);--acc-ink:var(--tangerine-vivid-ink)}
.f-stone{--field:var(--stone-field);--ink:var(--stone-ink);--acc:var(--tangerine-vivid);--acc-ink:var(--tangerine-vivid-ink)}
.f-sky-soft{--field:var(--sky-soft-field);--ink:var(--sky-soft-ink);--acc:var(--tangerine-vivid);--acc-ink:var(--tangerine-vivid-ink)}
.f-aqua-soft{--field:var(--aqua-soft-field);--ink:var(--aqua-soft-ink);--acc:var(--sun-vivid);--acc-ink:var(--sun-vivid-ink)}
.f-sun-soft{--field:var(--sun-soft-field);--ink:var(--sun-soft-ink);--acc:var(--sky-vivid);--acc-ink:var(--sky-vivid-ink)}
.f-leaf-soft{--field:var(--leaf-soft-field);--ink:var(--leaf-soft-ink);--acc:var(--tangerine-vivid);--acc-ink:var(--tangerine-vivid-ink)}
.f-tangerine-soft{--field:var(--tangerine-soft-field);--ink:var(--tangerine-soft-ink);--acc:var(--sky-vivid);--acc-ink:var(--sky-vivid-ink)}
.field{
  background:var(--field);color:var(--ink);
  --rule:color-mix(in srgb, var(--ink) 28%, transparent);
  --tint:color-mix(in srgb, var(--ink) 9%, var(--field));
}
/* vivid accents: small fills only (chips, marks, buttons). Never put .v-* on a section. */
.v-sky{background:var(--sky-vivid);color:var(--sky-vivid-ink)}
.v-aqua{background:var(--aqua-vivid);color:var(--aqua-vivid-ink)}
.v-sun{background:var(--sun-vivid);color:var(--sun-vivid-ink)}
.v-leaf{background:var(--leaf-vivid);color:var(--leaf-vivid-ink)}
.v-tangerine{background:var(--tangerine-vivid);color:var(--tangerine-vivid-ink)}
.v-rose{background:var(--rose-vivid);color:var(--rose-vivid-ink)}

/* headline voice switch (settings footer): data-headers = serif (Newsreader, default) | geist-serif | sans */
:root[data-headers="geist-serif"]{--font-display:var(--font-geist-serif);--dw:400;--title-track:-.03em;--h2-track:-.025em}
:root[data-headers="sans"]{--font-display:var(--font-sans);--dw:580;--title-track:-.03em;--h2-track:-.022em}
:root[data-headers="sans"] .gname,:root[data-headers="sans"] .gtheme,:root[data-headers="sans"] .statement{letter-spacing:-.02em}