/* Proving Ground: shared visual tokens. One file for the whole product (index.html, m/, moon/, planner/, local/).
   Every page loads tokens.css, then base.css (shared type and controls), then its own sheet.
   ?palette=old shows the previous palette (violet hand, blue-black ground): the block at the end of this file,
   switched on by <html data-palette="old"> (index.html's head script and src/nav.js set it from the URL).
   The type system is written down in app/TYPE.md; keep the two in step.

   Rules that go with the tokens (please keep them):
   - Every colour has one meaning everywhere. Ink (--ink, bone) = the selected thing, focus, links,
     the "you are here" mark and our hand-drawn notes. Amber = where an analogy breaks; nothing else, and
     once per screen. World tones = the disc or area of a world's data. Nothing else is coloured.
   - Components use --ink, never --violet (kept for old code) and never a raw colour. The only hex values
     of the product live in this file.
   - One face, Jost (as in the deck, TYPE_SYSTEM v8). Capitals (tracked, --track-caps) name the one thing a
     view is about; statements are sentence case; long lists are lower case. Hand notes are Excalifont.
   - Digits that line up or change use tabular figures (.num).
   - No gradients on text, no glow, no emoji, no logos.
   - Nothing a person must read is smaller than 16 px (--t-small = --t-micro = 1rem).
   - Font sizes come from the scale below and from nowhere else. */

/* ------------------------------------------------------------------ faces (all files in vendor/fonts) */
/* Jost: variable, weight 100-900, subset to Latin (+ Latin Extended-A, dashes, quotes, minus, degree,
   times, approx, less/greater-equal) with a thin space, arrows and primes added in Jost's own metrics
   (results/app_pass/B/build_jost.py). Every weight used is a position on the weight axis: real outlines. */
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../vendor/fonts/jost-var-latin.woff2") format("woff2");
}
/* Handwriting: one weight, upright only. Never ask it for bold or italic. */
@font-face {
  font-family: "Excalifont";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../vendor/fonts/excalifont-latin.woff2") format("woff2");
}
/* Georgian companion (Mkhedruli, Mtavruli, Asomtavruli only; digits and punctuation stay with Jost).
   Loaded only when Georgian text is on the page (unicode-range).
   size-adjust brings the Georgian letter height (0.536 em) to Jost's x-height (0.47 em): 88 %.
   The override metrics are Jost's own (ascent 1.07, descent 0.375) divided by 0.88, so a Georgian word
   does not move the line. Georgian has no italic: the same upright file is declared for italic. */
@font-face {
  font-family: "Noto Sans Georgian";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62.5% 100%;
  font-display: swap;
  src: url("../vendor/fonts/noto-sans-georgian-var.woff2") format("woff2");
  unicode-range: U+0589, U+10A0-10FF, U+1C90-1CBA, U+1CBD-1CBF, U+205A, U+2D00-2D2F, U+2E31;
  size-adjust: 88%;
  ascent-override: 121.6%;
  descent-override: 42.6%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Noto Sans Georgian";
  font-style: italic;
  font-weight: 100 900;
  font-stretch: 62.5% 100%;
  font-display: swap;
  src: url("../vendor/fonts/noto-sans-georgian-var.woff2") format("woff2");
  unicode-range: U+0589, U+10A0-10FF, U+1C90-1CBA, U+1CBD-1CBF, U+205A, U+2D00-2D2F, U+2E31;
  size-adjust: 88%;
  ascent-override: 121.6%;
  descent-override: 42.6%;
  line-gap-override: 0%;
}

:root {
  /* ---- colour: "Regolith", the final palette (deck/color/PALETTE.md, values from deck/color/app_tokens.css).
          Everything we draw is bone. ONE colour, amber, marks where the Earth analogy breaks: once per
          screen, in the detail pane (the verdict, the failing bars and their numbers). No violet anywhere.
          World tones (--mars, --earth, --moon) only on discs, chips and areas of 6 px or more.
          ?palette=old shows the previous palette (the block under :root[data-palette="old"] below). ---- */
  /* surfaces: the footage's neutral black (not blue-black) */
  --void: #050505;          /* page and 3D stage background */
  --stage: #0e0d0c;         /* raised surface: panels, docks, the top bar */
  --stage-2: #1d1c1a;       /* hovered row, input track */
  --line: #2d2c2a;          /* hairlines (laptop only: they vanish on a projector) */
  --line-strong: #716f6c;   /* borders of controls; any line the hall must see */

  /* text (contrast on void) */
  --bone: #ede9df;          /* primary text      16.8 */
  --ash: #bbb8b0;           /* secondary text    10.3 */
  --smoke: #aaa7a0;         /* captions           8.5 (never below 16 px) */

  /* meaning */
  --violet: #ede9df;        /* = --ink: OUR HAND, now bone: selection, focus, links, hand notes */
  --violet-deep: #3a3935;   /* a pressed fill behind bone text */
  --violet-wash: rgba(237, 233, 223, 0.10);
  --violet-hover: #bbb8b0;  /* hover on a bone fill dims to ash */
  --on-violet: #050505;     /* text on a bone fill (primary button) */
  --amber: #eeb72f;         /* where the analogy breaks: the verdict, the failing bar, its number. Nothing else */
  --amber-wash: rgba(238, 183, 47, 0.13);
  --amber-faint: rgba(238, 183, 47, 0.10);
  --mars: #b57d61;          /* the Mars disc / chip; Mars areas >= 6 px; never a line, never an accent */
  --earth: #a1b3c6;         /* the Earth disc / chip */
  --moon: #b4b1a9;          /* the Moon disc / chip; Moon areas */

  /* the deck's role names (same values) */
  --hand: #ede9df;
  --hand-deep: #3a3935;
  --hand-wash: rgba(237, 233, 223, 0.10);
  --breaks: #eeb72f;
  --breaks-wash: rgba(238, 183, 47, 0.13);
  --casing: #050505;        /* casing of a hand mark that crosses a picture or a map: a void copy 4 px wider */
  --on-hand: #050505;
  --on-breaks: #050505;

  /* ---- roles: every component uses these ---- */
  --ink: var(--violet);           /* selection, focus, links, the "you are here" mark, hand notes (bone) */
  --ink-wash: var(--violet-wash); /* the fill behind a selected row or pressed control */
  --ink-hover: var(--violet-hover);
  --on-ink: var(--on-violet);
  /* verdicts (fixed strings of the data: Most recommended ... Not fully measured). In the detail pane
     "Not recommended" is the break (amber); in list rows every verdict is quiet (.verdict.is-quiet: smoke). */
  --v-most: var(--bone);
  --v-rec: var(--bone);
  --v-res: var(--ash);
  --v-not: var(--amber);
  --v-partial: var(--smoke);
  /* bone at low strength: tracks, washes, hairline fills */
  --bone-1: rgba(237, 233, 223, 0.02);
  --bone-2: rgba(237, 233, 223, 0.08);
  --bone-3: rgba(237, 233, 223, 0.14);
  --bone-4: rgba(237, 233, 223, 0.22);
  --scrim: rgba(5, 5, 5, 0.72);   /* behind text laid on a picture */
  --scrim-strong: rgba(5, 5, 5, 0.92);
  --shade: rgba(0, 0, 0, 0.5);
  --panel: rgba(14, 13, 12, 0.9);

  /* ---- ground tones of the 3D terrain (sRGB; the renderer converts them). Unchanged on purpose: within
          3.4 OKLab units of the sampled photographs (PALETTE.md "3D ground tints"). ---- */
  --tone-mars-hi: #bd8a62;  --tone-mars-lo: #6c4632;  --tone-mars-rock: #473128;
  --tone-earth-hi: #c7ab7d; --tone-earth-lo: #786246; --tone-earth-rock: #50463a;
  --tone-moon-hi: #b6b3ad;  --tone-moon-lo: #696763;  --tone-moon-rock: #55534f;
  --tone-rim: #ede9df;      --tone-ruler: #aaa7a0;
  /* the flat plates: sampled means of the real pictures (deck/color/samples.json) */
  --ground-mars-hi: #b88a62;
  --ground-mars-lo: #5f4430;
  --ground-earth-hi: #c4ad97;
  --ground-earth-lo: #6a5e53;
  --ground-moon-hi: #b2b0ac;
  --ground-moon-lo: #555451;
  --plate-bg: #1d1c1a;
  --plate-bg-2: #2d2c2a;
  /* colour keys of the 3D overlays and the score maps: the one sequential ramp, "lamplit"
     (deck/color/ramps.json; the shaders in src/three/shaders.js use the same five stops in linear light) */
  --key-slope: linear-gradient(90deg, #4e463f, #766657 25%, #9f886f 50%, #c2ae91 75%, #e1d6c0);
  --key-height: linear-gradient(90deg, #4e463f, #766657 25%, #9f886f 50%, #c2ae91 75%, #e1d6c0);
  --lamp-0: #4e463f; --lamp-1: #6e5f52; --lamp-2: #8e7a65; --lamp-3: #ae967b; --lamp-4: #c9b699; --lamp-5: #e1d6c0;

  /* ---- type: Jost for everything we set, Excalifont for the hand, Noto Sans Georgian behind both ---- */
  --f-ui: "Jost", "Noto Sans Georgian", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-display: var(--f-ui);
  --f-geo: "Noto Sans Georgian", "Jost", sans-serif;
  --f-hand: "Excalifont", "Jost", "Noto Sans Georgian", cursive;

  /* ---- type scale: ratio 1.2 on 16 px (Jost's x-height is 0.47 em, so 16 px is the floor).
          rem, so presenter mode scales it whole. ---- */
  --t-micro: 1rem;          /* 16    credits and source lines: the floor too */
  --t-small: 1rem;          /* 16    step 0: labels, captions, units, controls */
  --t-body: 1.2rem;         /* 19.2  step 1: running text, values */
  --t-lead: 1.44rem;        /* 23    step 2: lead paragraph, readouts */
  --t-3: 1.728rem;          /* 27.6  step 3: key numbers beside a place */
  --t-4: 2.074rem;          /* 33.2  step 4: a place name in a panel */
  --t-5: 2.488rem;          /* 39.8  step 5: the selected place, big numbers */
  --t-6: 2.986rem;          /* 47.8  step 6: the statement of a view */
  --t-7: 3.583rem;          /* 57.3  step 7: a number on the stage */
  --t-8: 4.3rem;            /* 68.8  step 8: the number a screen is about */
  --t-9: 5.16rem;           /* 82.6  step 9 */
  --t-hand: 1.44rem;        /* handwriting sits on step 2 */

  /* aliases kept for older rules */
  --t-h1: var(--t-6);
  --t-h2: var(--t-3);
  --t-place: var(--t-7);

  /* ---- weights: positions on Jost's axis ---- */
  --w-regular: 400;         /* body, units */
  --w-medium: 500;          /* statements, names, labels, navigation, controls */
  --w-strong: 650;          /* numbers, values, the selected thing */
  --w-place: 500;           /* names (was the italic serif) */
  --w-display: 500;         /* statements */

  /* ---- leading and measure per role ---- */
  --lh-display: 1.1;
  --lh-tight: 1.2;          /* labels, rows, numbers */
  --lh-small: 1.4;
  --lh-body: 1.45;
  --lh-lead: 1.38;
  --measure: 30em;          /* running text: about 65 characters of Jost */
  --measure-small: 32em;

  /* ---- tracking ---- */
  --track-caps: 0.06em;     /* capitals that name a thing */
  --tr-display: -0.01em;    /* statements at step 5 and above */
  --tr-place: 0;
  --tr-label: 0.01em;       /* small labels */
  --tr-stamp: 0.09em;

  /* ---- space (multiples of 4 px, in rem) ---- */
  --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem;
  --s-6: 2rem; --s-7: 3rem; --s-8: 4rem;
  --gutter: clamp(1rem, 2.6vw, 2.75rem);     /* the one outer margin, left and right, on every screen */
  --bar-h: 3.5rem;                           /* top navigation height */
  --ledger-w: clamp(22rem, 30vw, 29rem);
  --tap: 2.75rem;                            /* 44 px: the smallest thing a thumb must hit */

  /* ---- aliases used by the Moon low-Sun page ---- */
  --bg: var(--void);
  --fg: var(--bone);
  --fg-dim: var(--ash);
  --accent: var(--ink);
  --warn: var(--amber);
  --ok: var(--bone);
  --font-ui: var(--f-ui);

  /* ---- shape and motion ---- */
  --radius: 3px;
  --ease: cubic-bezier(0.22, 0.7, 0.2, 1);
  --fast: 150ms;            /* a control answering */
  --med: 240ms;             /* content changing, one view becoming the next */
  --slow: 350ms;            /* a surface arriving */
}

/* ------------------------------------------------------------------ ?palette=old
   The palette before the fix round (violet hand, blue-black ground), kept reachable for comparison only. */
:root[data-palette="old"] {
  --void: #050608; --stage: #0b0d11; --stage-2: #12151b; --line: #232730; --line-strong: #3b404c;
  --bone: #ede9df; --ash: #a3a097; --smoke: #8a877f;
  --violet: #a98bff; --violet-deep: #6d4fe0; --violet-wash: rgba(169, 139, 255, 0.14); --violet-hover: #bda6ff; --on-violet: #0c0717;
  --hand: #a98bff; --hand-deep: #6d4fe0; --hand-wash: rgba(169, 139, 255, 0.14); --casing: transparent; --on-hand: #0c0717;
  --amber: #f2b441; --amber-wash: rgba(242, 180, 65, 0.13); --amber-faint: rgba(242, 180, 65, 0.10);
  --breaks: #f2b441; --breaks-wash: rgba(242, 180, 65, 0.13);
  --mars: #e0774a; --earth: #62b4d6; --moon: #c9c6bc;
  --scrim: rgba(5, 6, 8, 0.72); --scrim-strong: rgba(5, 6, 8, 0.92); --panel: rgba(11, 13, 17, 0.9);
  --tone-ruler: #8d8a82;
  --ground-mars-hi: #c98a5e; --ground-mars-lo: #6e3f2b; --ground-earth-hi: #c9b48f; --ground-earth-lo: #6b5d4a;
  --ground-moon-hi: #b9b6b0; --ground-moon-lo: #55534f; --plate-bg: #15161a; --plate-bg-2: #1c1e24;
  --key-slope: linear-gradient(90deg, #2c3d5c, #46689a 25%, #9a9c97 50%, #dfae4e 75%, #fde98f);
  --key-height: linear-gradient(90deg, #32445a, #516f70 25%, #a3a686 50%, #d8c59e 75%, #fbfaf6);
}