/* Gio system 2026 - tokens. Light theme only. 3 font files (about 55 KB). */
@font-face{font-family:Anton;src:url(fonts/anton-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"General Sans";src:url(fonts/general-400.woff2) format("woff2");font-weight:400 500;font-display:swap}
@font-face{font-family:"General Sans";src:url(fonts/general-600.woff2) format("woff2");font-weight:600 800;font-display:swap}

:root{
  color-scheme:light;

  /* Palette from the approved covers (31-10-2026). Raw values: never use them
     directly in components, use the roles below. */
  --cobalt:#1E4BFF;      /* brand, grounds, time on butter/cream */
  --cobalt-deep:#1639CC; /* GIO tab on cobalt, links on warm grounds */
  --cobalt-ink:#0F2FA8;  /* giant time on orange and coral (3.7 / 4.1) */
  --yellow:#FFD400;      /* THE action on dark grounds, ground of slot A */
  --orange:#FF6A13;      /* ground of slot B, week blocks */
  --coral:#FF7A59;       /* ground of slot C, week blocks */
  --butter:#FFD866;      /* soft ground, chips */
  --ink:#0E1220;         /* text, action on warm grounds */
  --ink-2:#4A5068;       /* secondary text on cream, yellow and butter only */
  --cream:#F5F3EC;       /* page */
  --white:#FFFFFF;
  --tab-yellow:#E6BC00;  --tab-orange:#D9540A;  --tab-coral:#E4603C;  --tab-butter:#F0C23F;

  /* ROLES. One colour = one meaning.
     action  yellow (on cobalt/ink) or ink (on warm grounds): the ONE thing to press.
     time    the giant minutes: yellow on cobalt/ink, cobalt on yellow/butter, cobalt-ink on orange/coral.
     ground  cobalt, yellow, orange, coral, butter, cream: sections, never actions.
     text    ink on light, white on cobalt/ink. */
  --page:var(--cream);
  --text:var(--ink);
  --text-2:var(--ink-2);
  --link:var(--cobalt);       /* 5.4 on cream */
  --focus:var(--ink);

  /* Default ground = cream. Sections override with .ground-*. */
  --ground:var(--cream);
  --on-ground:var(--ink);
  --on-ground-2:var(--ink-2);
  --time:var(--cobalt);       /* large text only (>= 3) */
  --action:var(--ink);
  --on-action:var(--white);
  --tab:var(--cobalt-deep);
  --on-tab:var(--white);
  --card:var(--white);

  /* Type. Anton slanted for display, General Sans for text. */
  --font-display:Anton,Impact,"Arial Narrow",sans-serif;
  --font-text:"General Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --slant:-11deg;
  --fs-giant:clamp(7rem,38vw,16rem);     /* minutes / week numbers */
  --fs-hero:clamp(3.25rem,13vw,7.5rem);
  --fs-h2:clamp(2.25rem,7vw,4rem);
  --fs-h3:clamp(1.5rem,3.4vw,2rem);
  --fs-lead:clamp(1.125rem,2.2vw,1.375rem);
  --fs-body:1.0625rem;
  --fs-small:.9375rem;
  --lh-display:.96;
  --lh-text:1.5;

  /* Space (4 px base), radii, layout */
  --s-1:.25rem; --s-2:.5rem; --s-3:.75rem; --s-4:1rem; --s-5:1.5rem; --s-6:2rem; --s-7:3rem; --s-8:4.5rem; --s-9:7rem;
  --gutter:clamp(1rem,4vw,2rem);
  --wrap:72rem;
  --r-sm:.5rem; --r-md:.75rem; --r-lg:1.25rem; --r-tab:1rem;
  --tap:2.75rem;                          /* 44 px minimum target */

  /* Shadows: flat by default. One hard offset for lifted cards. */
  --lift:0 .5rem 0 -.25rem var(--ink);

  /* Motion */
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-snap:cubic-bezier(.34,1.56,.64,1);
  --d-fast:.12s; --d-base:.22s; --d-slow:.6s; --d-view:.28s;
}

/* Breakpoints (media queries cannot use var(); keep these numbers in sync):
   --bp-sm 30rem (480) | --bp-md 48rem (768) | --bp-lg 64rem (1024) | --bp-xl 80rem (1280) */

/* Ground classes set the five roles together so a pair is never mixed by hand. */
.ground-cobalt{--ground:var(--cobalt);--on-ground:var(--white);--on-ground-2:var(--white);--time:var(--yellow);--action:var(--yellow);--on-action:var(--ink);--tab:var(--cobalt-deep);--on-tab:var(--white);--focus:var(--white);--link:var(--white)}
.ground-ink{--ground:var(--ink);--on-ground:var(--white);--on-ground-2:var(--white);--time:var(--yellow);--action:var(--yellow);--on-action:var(--ink);--tab:var(--cobalt);--on-tab:var(--white);--focus:var(--white);--link:var(--white)}
.ground-yellow{--focus:var(--ink);--ground:var(--yellow);--on-ground:var(--ink);--on-ground-2:var(--ink-2);--time:var(--cobalt);--action:var(--ink);--on-action:var(--yellow);--tab:var(--tab-yellow);--on-tab:var(--ink);--link:var(--cobalt-deep)}
.ground-orange{--focus:var(--ink);--ground:var(--orange);--on-ground:var(--ink);--on-ground-2:var(--ink);--time:var(--cobalt-ink);--action:var(--ink);--on-action:var(--white);--tab:var(--tab-orange);--on-tab:var(--ink);--link:var(--ink)}
.ground-coral{--focus:var(--ink);--ground:var(--coral);--on-ground:var(--ink);--on-ground-2:var(--ink);--time:var(--cobalt-ink);--action:var(--ink);--on-action:var(--white);--tab:var(--tab-coral);--on-tab:var(--ink);--link:var(--ink)}
.ground-butter{--focus:var(--ink);--ground:var(--butter);--on-ground:var(--ink);--on-ground-2:var(--ink-2);--time:var(--cobalt);--action:var(--ink);--on-action:var(--white);--tab:var(--tab-butter);--on-tab:var(--ink);--link:var(--cobalt-deep)}
.ground-cream{--ground:var(--cream);--focus:var(--ink);--on-ground:var(--ink);--on-ground-2:var(--ink-2);--time:var(--cobalt);--action:var(--ink);--on-action:var(--white);--link:var(--cobalt)}

/* h3 fix: the ring of an element that carries its own ground (a card) sits OUTSIDE it,
   on the parent ground, so it must use the parent's focus colour. Sections publish it as --ring. */
:root{--ring:var(--ink)}
.section,.ticker,.footer{--ring:var(--focus)}