/* Pareto Paradox theme. Every value the site uses lives here; site.css only reads these.
   Colours follow the show's spec (art/ui/SPEC.md section 2): one job each. Contrast is checked by
   web/tools/check_contrast.py, which parses this file. */

@font-face {
  font-family: "Anton";
  src: url("../fonts/Anton-Regular.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Special Elite";
  src: url("../fonts/SpecialElite-Regular.woff2") format("woff2");
  font-display: swap;
}

:root {
  color-scheme: only dark; /* the site is already dark: asks browsers not to recolour it */

  /* colour, one job each */
  --ink: #121015;        /* the page and the one outline colour */
  --paper: #F3E6CC;      /* every word, and paper where paper is the object (notebook pages, cards) */
  --grey: #E2D2D4;       /* secondary words: model versions, column heads, times */
  --ember: #FF4D5A;      /* lies, pulls of the trigger, out */
  --phosphor: #8FE0A0;   /* truth, calls that were right, survived */
  --gold: #FFD44A;       /* the winner, and only the winner */
  --lamp: #FFB974;       /* where you are: hover and keyboard focus */
  --velvet: #2A0C10;     /* the dark under the curtain image while it loads */

  /* cast colours (show spec 2b; DeepSeek drawn lifted as UiKit.Readable() does) */
  --c-opus: #D97757;
  --c-astra: #BEC4CC;
  --c-deepseek: #5572FF;

  /* the notebook page: ink words on paper, no outline */
  --sheet-rule: #D9C9A8; /* ruled lines on the notebook page, texture only */

  /* type */
  --font-display: "Anton", Impact, "Arial Narrow", sans-serif;
  --font-body: "Special Elite", "Courier New", monospace;

  --t-hero: clamp(2.75rem, 1.2rem + 7vw, 7rem);
  --t-h2: clamp(2.25rem, 1.4rem + 4vw, 5rem);
  --t-h3: clamp(1.6rem, 1.2rem + 1.8vw, 2.6rem);
  --t-name: clamp(2rem, 1.5rem + 2.4vw, 3.4rem);
  --t-stat: clamp(1.9rem, 1.5rem + 1.6vw, 3rem);
  --t-lead: clamp(1.15rem, 1rem + 0.7vw, 1.6rem);
  --t-body: clamp(1.0625rem, 1rem + 0.3vw, 1.2rem);
  --t-small: clamp(1rem, 0.96rem + 0.15vw, 1.05rem);
  --t-name-col: clamp(0.95rem, 4.9vw, 1.7rem);  /* a name heading a phone column: the longest must fit a third of the page */
  --t-model-col: clamp(0.75rem, 3.8vw, 1rem);

  /* outline for words over pictures (8 directions, so it reads in every browser) */
  --ol: 0.06em;
  --outline:
    calc(var(--ol) * -1) calc(var(--ol) * -1) 0 var(--ink), 0 calc(var(--ol) * -1) 0 var(--ink),
    var(--ol) calc(var(--ol) * -1) 0 var(--ink), var(--ol) 0 0 var(--ink),
    var(--ol) var(--ol) 0 var(--ink), 0 var(--ol) 0 var(--ink),
    calc(var(--ol) * -1) var(--ol) 0 var(--ink), calc(var(--ol) * -1) 0 0 var(--ink),
    0 0.12em 0.25em rgb(18 16 21 / 0.8);

  /* space and shape: one radius (none) and a short spacing scale */
  --s1: 0.5rem;
  --s2: 1rem;
  --s3: 1.5rem;
  --s4: 2.5rem;
  --s5: clamp(3.5rem, 2rem + 6vw, 7rem);
  --measure: 68ch;
  --page: 76rem;
  --radius: 0;
  --focus-ring: 3px solid var(--lamp);

  /* light, as rgb channels for alpha: lamp glow, spotlights and the marquee bulbs (texture only, never text) */
  --light: 255 225 170;
  --bulb: 255 236 196;
  --shade: 0 0 0;

  --t-nav: clamp(1.2rem, 1rem + 0.75vw, 1.65rem);

  /* motion: transform and opacity only (plus cheap filters) */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-back: cubic-bezier(0.34, 1.5, 0.64, 1);
  --dur: 600ms;
  --dur-fast: 320ms;
  --stagger: 80ms;
  --chase: 1.2s;
  --tilt: -4deg;
}