/* tokens.css - the visual direction, chosen by the owner 2026-11-05.
   Direction C "scrutineering": a technical inspection sheet. Paper and ink,
   hard hairlines, one red. The calculator is the single dark object on the
   sheet, built on direction B's document form. */

:root {
  /* ── paper and ink ── */
  --paper: #FBFAF7;
  --paper-2: #F3F1EC;      /* banded sections, table stripes */
  --card: #FFFFFF;
  --ink: #121212;
  --ink-2: #3A3733;        /* secondary text on paper */
  --muted: #6B6760;        /* labels, notes */
  --rule: #D8D4CC;         /* hairlines */
  --rule-2: #EAE7E0;       /* faint hairlines */

  /* ── the dark plate: hero, Bali band, calculator ── */
  --plate: #141211;
  --plate-2: #1D1A18;
  --plate-3: #231F1C;
  --bone: #F2EFEA;
  --bone-muted: #9B948B;
  --plate-rule: rgba(242, 239, 234, .16);
  --plate-hair: rgba(242, 239, 234, .09);

  /* ── the one red ── */
  --red: #CE1A1A;
  --red-deep: #A51212;
  --red-lit: #FF3B21;      /* the same red, legible on the dark plate */

  /* ── type ── */
  --display: "Oswald", "Arial Narrow", Helvetica, sans-serif;
  --body: "Golos Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ── measure ── */
  --pad: clamp(16px, 5vw, 72px);
  --gap: clamp(28px, 4vw, 56px);
  --maxw: 1280px;

  /* ── depth: light falls from the upper left ── */
  --raise: 0 1px 0 #fff inset, 1px 2px 2px rgba(18, 18, 18, .05), 14px 20px 36px -22px rgba(18, 18, 18, .4);
  --lift: 0 -1px 0 rgba(255, 244, 232, .09) inset, 24px 32px 66px -34px rgba(0, 0, 0, .85), 2px 3px 0 rgba(0, 0, 0, .22);

  /* ── one paper tooth tile, used once on the sheet and once on the plate ── */
  --tooth: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='t'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.68' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23t)'/%3E%3C/svg%3E");
}