/* ==========================================================================
   Youth's Corner — Design Tokens
   Single source of truth. Extracted verbatim from the approved homepage
   (colourful glassmorphism build). Do not redefine these values anywhere
   else; every page and the CMS consume them from here.
   ========================================================================== */

:root{
  /* ---- Colour: forest (primary ground) ---- */
  --forest:#0E1F17;
  --forest-2:#163525;
  --forest-3:#1E4A33;
  --forest-deep:#081209;

  /* ---- Colour: hivis (primary accent / action) ---- */
  --hivis:#CFE33F;
  --hivis-2:#B4C82B;

  /* ---- Colour: secondary accents ---- */
  --coral:#FF6B4A;
  --teal:#17A398;

  /* ---- Colour: paper ---- */
  --cream:#FAF7F0;
  --cream-2:#F1EDE2;

  /* ---- Colour: ink ---- */
  --ink:#12100C;
  --muted:rgba(18,16,12,0.6);
  /* 0.62, not 0.42: at 0.42 this measured 2.76:1 on cream and it is used for
     small labels in 23 places across the site and the CMS. 0.62 gives 5.2:1
     and still reads as clearly secondary to --muted. */
  --muted-2:rgba(18,16,12,0.62);

  /* Text on --coral and --teal is always --forest, never white. White measures
     2.82:1 on coral and 3.12:1 on teal; forest gives 6.07 and 5.48. This is a
     property of the two colours, so it applies to every badge, chip, tag and
     button that uses them. */

  /* The reverse case: the accents used AS text on a cream page. --coral reads
     2.63:1 there and --teal 2.92:1, so neither is usable for a label or a
     required marker. These are the darkened equivalents, chosen to clear 4.5
     on both cream and cream-2. Use them wherever an accent is the text
     colour; keep the bright originals for fills, rules and glows. */
  --coral-ink:#B23A22;
  --teal-ink:#0F746C;

  /* And the third case: an accent used as text on a dark or glass ground,
     where the darkened variants disappear (--teal-ink reads 1.54:1 on the
     glass cards). This is the lightened one. Together the three cover every
     surface the site actually has:
       --teal / --coral        fills, borders, glows
       --teal-ink / --coral-ink   text on cream
       --teal-light               text on forest or glass */
  --teal-light:#6FE0D2;
  --line:rgba(18,16,12,0.11);
  --line-2:rgba(18,16,12,0.18);

  /* ---- Colour: on-dark text ---- */
  --on-dark:rgba(255,255,255,0.78);
  --on-dark-soft:rgba(255,255,255,0.6);
  --on-dark-line:rgba(255,255,255,0.16);

  /* ---- Kenya flag rule (divider motif) ---- */
  --kenya-red:#C8102E;
  --kenya-green:#00753A;

  /* ---- Glass ---- */
  --glass-bg:rgba(255,255,255,0.14);
  --glass-bg-soft:rgba(255,255,255,0.09);
  --glass-border:rgba(255,255,255,0.38);
  --glass-blur:blur(18px) saturate(160%);
  --glass-blur-soft:blur(14px) saturate(140%);

  /* ---- Accent glows (card hover shadows, matched per accent) ---- */
  --glow-hivis:rgba(207,227,63,0.38);
  --glow-coral:rgba(255,107,74,0.34);
  --glow-teal:rgba(23,163,152,0.32);
  --glow-forest:rgba(30,74,51,0.30);

  /* ---- Status colours (CMS lead stages, badges, form states) ---- */
  --stat-new:#17A398;
  --stat-progress:#CFE33F;
  --stat-waiting:#FF6B4A;
  --stat-done:#1E4A33;
  --danger:#C8102E;
  --danger-soft:rgba(200,16,46,0.10);
  --ok:#00753A;
  --ok-soft:rgba(0,117,58,0.10);
  --warn:#B4750B;
  --warn-soft:rgba(180,117,11,0.12);

  /* ---- Type ---- */
  --f-display:'Bricolage Grotesque',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-body:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-mono:'JetBrains Mono',ui-monospace,'SFMono-Regular',Consolas,monospace;

  --t-kicker:.72rem;
  --t-meta:.76rem;
  --t-sm:.88rem;
  --t-base:1rem;
  --t-lede:1.02rem;
  --t-h3:1.16rem;
  --t-h2:clamp(1.9rem,3.8vw,2.85rem);
  --t-h1:clamp(2.4rem,5.6vw,4.2rem);
  --track-kicker:.16em;
  --track-display:-.025em;

  /* ---- Radii ---- */
  --r:24px;
  --r-sm:14px;
  --r-xs:9px;
  --pill:999px;

  /* ---- Rhythm ---- */
  --sp-1:6px;  --sp-2:10px; --sp-3:16px; --sp-4:22px;
  --sp-5:30px; --sp-6:44px; --sp-7:64px; --sp-8:92px;
  --sec:114px;            /* standard section padding */
  --sec-tight:78px;       /* used where sections stack visually */
  --wrap:1240px;
  --gutter:32px;

  /* ---- Elevation ---- */
  --sh-card:0 22px 44px rgba(18,16,12,.14);
  --sh-soft:0 16px 32px rgba(18,16,12,.12);
  --sh-deep:0 30px 60px rgba(0,0,0,.42);
  --sh-press:0 6px 0 var(--forest);       /* 3D pressed pill, rest state */
  --sh-press-in:0 3px 0 var(--forest);    /* 3D pressed pill, hover state */

  /* ---- Motion ---- */
  --ease:cubic-bezier(.2,.7,.3,1);
  --dur-fast:.2s;
  --dur:.25s;
  --dur-slow:.65s;

  /* ---- Layers ---- */
  --z-blob:0;
  --z-content:2;
  --z-wave:3;
  --z-header:80;
  --z-up:90;
  --z-banner:95;
  --z-cursor:999;
  --z-bar:1000;
  --z-modal:1100;
}