/* Liat.ai v2 design tokens. Normative source: DESIGN.md at the repo root.
   North star: "The Floodlights Coming On". Green ground, orange light, never black. */

:root {
  /* Ground: the pitch at night. Nothing here is grey and nothing here is black. */
  --pitch-deep: #041A09;
  --pitch-ground: #07260F;
  --pitch-raised: #0E3A19;
  --pitch-raised-high: #14481F;
  --chalk-line: #1C5C2C;
  /* The same rule with the light on it. Card and sample hover borders were
     carrying this as a raw #2F7B41 in two stylesheets. */
  --chalk-line-lit: #2F7B41;

  /* Two lights: orange marks, amber informs. */
  --orange: #FF6B00;
  --orange-deep: #C24E00;
  --amber: #FFC94D;
  /* Amber stepped back for secondary text. Clears 4.5:1 on all four dark
     grounds (4.66 on the lightest). Use this wherever amber-dim was reading
     as text: amber-dim is 2.7:1 and is only for unlit hardware. */
  --amber-text: #D6A434;
  /* Unlit segments, unlit matrix dots, and nothing that has to be read. */
  --amber-dim: #7A5E1E;
  /* The paper world's orange. Brand orange is 2.4:1 on paper and unusable
     there; this clears 5.2:1 while staying on the same hue. */
  --orange-ink: #A83E00;

  /* Ink */
  --cream: #F4EEDC;
  --sage: #9DB5A2;
  --on-orange: #120800;

  /* Reserved. One per screen, never decorative. */
  --live-red: #E63946;

  /* Reading world. Long-form only. */
  --paper: #F0EAD8;
  --paper-ink: #1B2418;
  --paper-rule: #D9CDA8;

  /* Team colours for the living pitch. Neutral kit colours, not a real club. */
  --kit-home: #F4EEDC;
  --kit-home-line: #1C5C2C;
  --kit-away: #FF6B00;
  --kit-away-line: #5C2600;
  --ball: #FFF6E0;

  /* Type */
  --font-display: Oswald, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  --font-body: Archivo, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;

  --fs-display: clamp(2.6rem, 6.4vw, 5.6rem);
  --fs-headline: clamp(1.75rem, 3.2vw, 2.75rem);
  --fs-title: 1.125rem;
  --fs-body-lg: 1.1875rem;
  --fs-body: 1.0625rem;

  /* The instrument register has three sizes, not one. It used to have a single
     11px step doing every small job on the site: the section name, the nav, the
     buttons, the chips, and every caption. One size cannot serve a word stamped
     on a piece of equipment and a thirty-eight character sentence.

     eyebrow  the name of a section or a page. Read across the room.
     label    the working size: nav, buttons, chips, spec terms, captions.
     micro    hardware marks only. Corner stamps, axis caps, feed columns.
              Nothing anyone has to read to understand the page. */
  --fs-eyebrow: 0.9375rem;
  --fs-data: 0.8125rem;
  --fs-label: 0.8125rem;
  --fs-micro: 0.6875rem;

  /* Tracking is inverse to size here. Wide tracking scatters a word into loose
     glyphs and word shape is most of what you read by at small sizes, so the
     openness belongs on the marks you glance at, not the ones you read. */
  --track-eyebrow: 0.08em;
  --track-label: 0.12em;
  --track-micro: 0.16em;
  --track-display: 0.005em;

  /* Space */
  --sp-xs: 6px;
  --sp-sm: 12px;
  --sp-md: 20px;
  --sp-lg: 36px;
  --sp-xl: 64px;
  --sp-section: clamp(72px, 9vw, 132px);

  --container: 1200px;
  --container-wide: 1600px;
  --gutter: 24px;
  --measure: 68ch;

  /* Shape. Equipment is square, content is rounded. */
  --r-sm: 3px;
  --r-md: 6px;
  --r-lg: 12px;
  --r-stage: 18px;
  --r-pill: 999px;

  /* Warm shadows only. A black box-shadow on this ground is a bug. */
  --shadow-spill: 0 0 140px -30px rgba(255, 107, 0, 0.42);
  --shadow-select: 0 0 0 1px var(--orange), 0 0 24px -8px rgba(255, 107, 0, 0.5);
  --shadow-chalk: inset 0 1px 0 rgba(244, 238, 220, 0.06);
  --shadow-focus: 0 0 0 3px rgba(255, 107, 0, 0.2);

  /* Motion */
  --ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-arrive: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-state: 160ms;
  --dur-arrive: 420ms;
  --dur-lights: 1400ms;

  --nav-h: 64px;
}

@media (max-width: 768px) {
  :root {
    --gutter: 16px;
    --nav-h: 56px;
  }
}