/* =============================================================================
   AssayBase — design tokens. THE single source of colour, type and spacing.
   Implements design-language.md v1.0 sections 1-3 literally.

   Plain-English: this file is the paint box. Every colour the site uses has a
   name here, and nowhere else in the whole repository may a raw colour code
   appear. If you need a colour that is not here, that is a design decision —
   add it here, with a name, or do not use it. tools/design_lint.py enforces
   that rule automatically.

   Order: fonts, then colour, then type roles, then space/line/shadow/motion.
   ========================================================================== */

/* ---- Self-hosted fonts (variable woff2, one file per family, swap on load) --- */
@font-face{font-family:InterTight;src:url('/fonts/inter-tight-var.woff2') format('woff2');font-weight:400 700;font-display:swap}
@font-face{font-family:Inter;src:url('/fonts/inter-var.woff2') format('woff2');font-weight:400 700;font-display:swap}
@font-face{font-family:JetBrains;src:url('/fonts/jetbrains-mono-var.woff2') format('woff2');font-weight:400 700;font-display:swap}

:root{
  /* ---------------------------------------------------------------- colour --
     §1. Dark surfaces are the default world. Light surfaces are the "paper"
     and mint sections. Nothing outside this block may name a colour. */

  /* Dark surfaces */
  --black:#07100c;          /* page background, nav, footer fill */
  --ink:#0a1310;            /* inset surfaces: form fields, tooltips, texture base */
  --panel:#0d1813;          /* card / cell background */
  --panel-2:#111f18;        /* alternate section band; table-row hover */
  --panel-3:#17271f;        /* cell hover; the empty part of a share bar */

  /* Lines — always 1px. Structural, secondary, interactive. */
  --line:#293b32;           /* section borders, cell separators, table header rule */
  --line-soft:#203028;      /* inner dividers, chart grid lines, row dividers */
  --line-strong:#53675c;    /* ghost buttons, inputs, chips at hover, checkbox */

  /* Accent */
  --mint:#35f2ac;           /* eyebrows, primary buttons, focus ring, series 1, up */
  --mint-pale:#a5f8d8;      /* primary button hover fill only */
  --mint-dim:rgba(53,242,172,.10);   /* active chip fill, highlighted-cell shadow */

  /* Text on dark */
  --text:#eef5f0;
  --muted:#9baaa2;          /* secondary body, stamps, axis labels, legends */
  --muted-2:#697970;        /* placeholders, disabled text, footnote credits */

  /* Light surfaces (paper + mint) */
  --paper:#dfe8e1;
  --paper-line:#a5b6ab;
  --ink-on-light:#07100c;   /* same value as --black, different job */
  --body-on-light:#394b41;
  --accent-on-light:#197d58;/* mint text never appears on light — this replaces it */
  --down-on-light:#8a5c14;

  /* Chart series. Max 4 per chart, assigned in this order, never skipped. */
  --chart-1:#35f2ac;        /* mint  */
  --chart-2:#eec078;        /* amber — also the "down" colour on dark (Ruling 5) */
  --chart-3:#7fc4ee;        /* sky   */
  --chart-4:#ee85b5;        /* rose  */

  /* Status. Red is form validation ONLY — never market movement. */
  --error:#ff8a80;
  --error-on-light:#b3261e;

  /* --- Named one-offs kept from the live page ------------------------------
     design-language.md §1's folding table says to keep #0D3527 as
     --status-on-mint "if needed". These are the same case: a colour that only
     exists on a mint section, where the spec's dark-surface tokens do not
     apply. They are named here so the no-raw-colour rule still holds. */
  --status-on-mint:#0d3527;            /* success line inside the mint sample form */
  --placeholder-on-mint:#1e4b38;       /* placeholder inside the mint sample form */
  --input-on-mint:rgba(255,255,255,.25); /* input fill on a mint section (§4) */
  --on-mint-rule:rgba(7,16,12,.28);     /* 1px rules drawn on a mint section */
  --nav-veil:rgba(7,16,12,.9);          /* the translucent sticky-nav fill */
  --panel-veil:rgba(8,16,12,.85);       /* the translucent pricing-card fill */
  --paper-numeral:rgba(21,57,40,.055);  /* the giant ghost numeral on paper */

  /* ------------------------------------------------------------------ type --
     §2. Families here; the fourteen roles are utility classes below, because a
     role is a bundle (weight + size/line-height + tracking + case) and a single
     CSS variable cannot carry a bundle. Each size is also exposed as its own
     variable so a shorthand can be written without repeating a number. */
  --display:InterTight,Inter,Arial,sans-serif;  /* headlines only */
  --sans:Inter,Arial,sans-serif;                /* body prose */
  --mono:JetBrains,monospace;                   /* EVERY number, label, button, axis */

  --fs-h3:30px;
  --fs-body:15px;
  --fs-body-lg:18px;
  --fs-body-sm:13px;
  --fs-mono-eyebrow:11px;
  --fs-mono-micro:9px;
  --fs-mono-label:12px;
  --fs-mono-cta:11px;
  --fs-stat-xl:44px;
  --fs-stat-md:34px;
  --fs-axis:11px;

  /* ----------------------------------------------------------------- space --
     §3. Base unit 4px; the twelve steps the spec names. */
  --sp-4:4px;   --sp-8:8px;   --sp-12:12px; --sp-16:16px;
  --sp-20:20px; --sp-24:24px; --sp-28:28px; --sp-32:32px;
  --sp-40:40px; --sp-56:56px; --sp-66:66px; --sp-112:112px;

  /* The side padding of the two-tier site header. The design draws it at 100px
     on a 1240px sheet; away from that sheet it breathes with the window. The
     weekly report re-points this at --report-pad inside its own bordered sheet,
     so one rule serves both. */
  --head-pad:max(5vw,20px);

  --section-pad:112px max(5vw,32px);
  --section-pad-mobile:76px 20px;
  --title-gap:66px;              /* section title -> content */
  --cell-pad:28px;
  --cell-pad-compact:24px;
  --maxw-dash:1180px;            /* dashboard content */
  --report-pad:100px;            /* the weekly report's side padding */
  --maxw-landing:1440px;         /* landing sections */

  /* ------------------------------------------------- line, shadow, motion --
     Borders are always 1px. Shadows are offset solid, never blurred — the only
     blur anywhere is the status-dot glow and the hero radial glow. */
  --bw:1px;
  --shadow-pop:18px 18px 0 rgba(53,242,172,.10);   /* highlighted cell, console */
  /* The tighter variant the hiring report's featured card uses. Added in
     design-language v1.2: the two live at different scales, so one length does
     not serve both. Same colour, same "offset solid, never blurred" rule. */
  --shadow-pop-tight:14px 14px 0 rgba(53,242,172,.10);
  --shadow-lift:10px 10px 0 rgba(7,16,12,.12);     /* dark object on a light surface */
  --glow-dot:0 0 14px rgba(53,242,172,.85);        /* the ONE allowed blur */
  --glow-dot-lo:0 0 8px rgba(53,242,172,.5);       /* its pulse, low point */
  --glow-dot-hi:0 0 18px rgba(53,242,172,1);       /* its pulse, high point */
  --glow-orbit:0 0 100px rgba(53,242,172,.28);     /* the hero orbit core */
  --hero-glow:rgba(53,242,172,.1);                 /* the hero radial gradient */
  --grid-texture:rgba(53,242,172,.035);            /* the 40px grid lines */
  --dur:.2s;
}

/* ---------------------------------------------------------------- type roles
   §2's fourteen roles, as utility classes. A new page sets type by adding one
   of these, never by inventing a size. The landing page predates them and keeps
   its own shorthands (which already resolve to these families) — retro-fitting
   them there would change pixels, and Task 1 is a refactor, not a redesign. */
.t-display-xl{font:600 clamp(58px,7vw,108px)/.88 var(--display);letter-spacing:-.07em}
.t-display-lg{font:600 clamp(42px,6vw,82px)/.94 var(--display);letter-spacing:-.06em}
.t-display-md{font:600 clamp(34px,4vw,52px)/1 var(--display);letter-spacing:-.05em}
.t-h3{font:600 var(--fs-h3)/1 var(--display);letter-spacing:-.04em}
.t-body{font:400 var(--fs-body)/1.6 var(--sans)}
.t-body-lg{font:400 var(--fs-body-lg)/1.55 var(--sans)}
.t-body-sm{font:400 var(--fs-body-sm)/1.6 var(--sans)}
.t-mono-eyebrow{font:600 var(--fs-mono-eyebrow)/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mint)}
.t-mono-micro{font:600 var(--fs-mono-micro)/1 var(--mono);letter-spacing:.08em}
.t-mono-label{font:500 var(--fs-mono-label)/1.5 var(--mono)}
.t-mono-cta{font:600 var(--fs-mono-cta)/1 var(--mono);letter-spacing:.04em}
.t-stat-xl{font:700 var(--fs-stat-xl)/1 var(--mono);letter-spacing:-.02em}
.t-stat-md{font:700 var(--fs-stat-md)/1 var(--mono);letter-spacing:-.02em}
.t-axis{font:500 var(--fs-axis)/1 var(--mono);color:var(--muted)}

/* Mint text never appears on a light surface (§1) — the eyebrow flips. */
.on-light .t-mono-eyebrow{color:var(--accent-on-light)}