/* ==============================================================
   TOKENS
   Every colour, size, space and timing the site uses. Components
   reference these and never hard-code values.

   Design language: deep slate-navy surfaces, one emerald accent,
   hairlines for structure. Emerald marks what matters (the key
   phrase, section numbers, the primary action, "current"); amber
   and red appear only as states inside the demo.
   Dark is the default; light is the visitor's choice.

   Cascade layers, lowest to highest priority. Each stylesheet
   puts its rules in one of these, so the order never depends on
   which file happens to load last.
   ============================================================== */
@layer tokens, base, components, layout, sections, demo, motion;

/* ---------- fonts (self-hosted, latin subset) ---------------- */
/* Mona Sans by GitHub, IBM Plex Mono by IBM; both SIL Open Font License */
@font-face{
  font-family:"Mona Sans";
  src:url("../fonts/mona-sans-latin.woff2") format("woff2");
  font-weight:200 900;
  font-stretch:75% 125%;
  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:"IBM Plex Mono";
  src:url("../fonts/ibm-plex-mono-400-latin.woff2") format("woff2");
  font-weight:400;
  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:"IBM Plex Mono";
  src:url("../fonts/ibm-plex-mono-500-latin.woff2") format("woff2");
  font-weight:500;
  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;
}

@layer tokens{
  :root{
    /* ---- colour: dark (default) ---- */
    --bg:#0B1219;
    --surface:#101A22;
    --sunken:#15212B;
    --ink:#EEF3F1;           /* headings, key text  */
    --ink-2:#B6C2C7;         /* body text           */
    --ink-3:#7D8C95;         /* secondary text      */
    --line:#1B2832;          /* hairlines           */
    --line-2:#283945;        /* stronger hairlines  */

    --accent:#22C55E;        /* fills: buttons, dots, bars */
    --accent-ink:#4ADE80;    /* emerald that reads as text */
    --accent-soft:rgba(34,197,94,.10);
    --accent-line:rgba(34,197,94,.32);
    --on-accent:#04130A;

    --ok:#4ADE80;
    --ok-soft:rgba(74,222,128,.12);
    --warn:#FBBF24;
    --bad:#F87171;

    --btn-bg:var(--accent);
    --btn-ink:var(--on-accent);
    --btn-hover:#4ADE80;

    --glow:rgba(34,197,94,.10);
    --panel-line:color-mix(in srgb,var(--accent) 16%,var(--line));
    --shadow-pop:0 0 0 1px rgba(255,255,255,.03),0 24px 48px -16px rgba(0,0,0,.75);
    --backdrop:rgba(5,9,13,.55);

    /* ---- type ---- */
    --font-sans:"Mona Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    --font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

    /* one scale for the whole site; the larger steps grow with the viewport */
    --text-2xs:.75rem;                                    /* 12    mono labels, tags        */
    --text-xs:.8125rem;                                   /* 13    meta, notes, the log     */
    --text-sm:.875rem;                                    /* 14    nav, small buttons       */
    --text-base:clamp(1rem,.97rem + .15vw,1.0625rem);     /* 16-17 body                     */
    --text-md:clamp(1.0625rem,1rem + .3vw,1.1875rem);     /* 17-19 intros, lead             */
    --text-lg:clamp(1.125rem,1.05rem + .35vw,1.3125rem);  /* 18-21 card and row titles      */
    --text-xl:clamp(1.375rem,1.2rem + .7vw,1.75rem);      /* 22-28 panel titles, numbers    */
    --text-2xl:clamp(1.875rem,1.35rem + 2.2vw,2.875rem);  /* 30-46 section headings         */
    --text-3xl:clamp(2.5rem,1.45rem + 4.6vw,5rem);        /* 40-80 hero, statement          */
    --text-4xl:clamp(4rem,2.6rem + 5vw,7rem);             /* 64-112 the sticky year         */

    --leading-tight:1.04;
    --leading-snug:1.2;
    --leading-body:1.6;
    --tracking-display:-.04em;
    --tracking-heading:-.025em;
    --tracking-title:-.012em;
    --tracking-label:.05em;
    --weight-display:560;
    --weight-title:600;
    --weight-ui:500;

    /* ---- space: 4 8 12 16 24 32 48 64 96 128 ---- */
    --s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:24px;--s-6:32px;--s-7:48px;--s-8:64px;--s-9:96px;--s-10:128px;
    --section-y:clamp(64px,10vw,128px);

    /* ---- shape, layout, motion ---- */
    --r:12px;
    --r-sm:8px;
    --r-xs:4px;
    --wrap:1120px;
    --gutter:clamp(16px,4vw,32px);
    --nav-h:64px;
    --ease-out:cubic-bezier(.2,.8,.2,1);
    --ease-io:cubic-bezier(.4,0,.2,1);
    --t-fast:.12s;
    --t-med:.25s;

    color-scheme:dark;
  }

  /* ---- colour: light ---- */
  :root[data-theme="light"]{
    --bg:#F6F8F7;--surface:#FFFFFF;--sunken:#EDF2F0;
    --ink:#0B1219;--ink-2:#34434D;--ink-3:#5B6B74;
    --line:#DDE5E2;--line-2:#C9D4D0;
    --accent:#16A34A;--accent-ink:#15803D;--accent-soft:rgba(22,163,74,.09);--accent-line:rgba(22,163,74,.35);
    --on-accent:#FFFFFF;
    --ok:#15803D;--ok-soft:rgba(21,128,61,.10);--warn:#B45309;--bad:#DC2626;
    --btn-bg:#15803D;--btn-ink:#FFFFFF;--btn-hover:#166534;
    --glow:rgba(22,163,74,.08);
    --shadow-pop:0 1px 2px rgba(11,18,25,.05),0 24px 48px -16px rgba(11,18,25,.2);
    --backdrop:rgba(11,18,25,.35);
    color-scheme:light;
  }
}