/* "Plaster and cobalt" — the direction the operator picked out of the proposal set.
   Tokens only: one face, palette roles, scale, motion. The palette is the subject's own
   materials: white plaster under water, the cobalt waterline tile, and the two signal inks a
   pool-test comparator card prints in. Every drawing is built from these roles, so the dark
   scheme is a token swap and nothing is redrawn for it. */

@font-face {
  font-family: "Instrument Sans";
  src: url("fonts/instrument-sans-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+2013-2014, U+2018-201D, U+2022, U+2026, U+00B7, U+00D7,
    U+2192, U+2194, U+2264, U+2265;
}

:root {
  color-scheme: light dark;

  /* surfaces */
  --c-bg: #eef3f0;
  --c-card: #ffffff;
  --c-sunk: #e3ebe7;
  --c-line: #c2d1cb;
  --c-line-strong: #7c908a;

  /* ink */
  --c-ink: #13201d;
  --c-ink-2: #3f514c;

  /* the answer, and nothing else */
  --c-accent: #14459b;
  --c-accent-ink: #ffffff;
  --c-band: rgba(20, 69, 155, 0.12);
  --c-band-ideal: rgba(20, 69, 155, 0.3);

  /* the state of a reading. Never the only carrier: a word, a glyph, a signed delta and a
     border weight ride with every use, and the two needles differ in shape. */
  --c-ok: #0f5c38;
  --c-warn: #8c2109;
  --c-ok-wash: #e4f0ea;
  --c-warn-wash: #fbe9e3;

  --c-focus: #14459b;
  --c-focus-ring: #ffd23d;

  /* type: one self-hosted family, 400-700, with the system stack behind it. Codes and signed
     deltas take the system monospace — a second @font-face would buy nothing a page reads. */
  --f-text: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --f-code: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --t-answer: clamp(2.375rem, 11.5vw, 3.5rem);
  --t-answer-2: clamp(1.125rem, 5vw, 1.375rem);
  --t-h1: clamp(1.5rem, 6.5vw, 2.125rem);
  --t-h2: 1.1875rem;
  --t-h3: 1.0625rem;
  --t-body: 1.0625rem;
  --t-data: 1rem;
  --t-small: 0.875rem;
  --t-micro: 0.75rem;

  --w-normal: 400;
  --w-label: 600;
  --w-strong: 700;

  --lh-tight: 1.05;
  --lh-head: 1.2;
  --lh-body: 1.55;

  --tr-tight: -0.02em;
  --tr-label: 0.09em;

  /* spacing, 4px base */
  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 0.75rem;
  --s4: 1rem;
  --s5: 1.5rem;
  --s6: 2rem;
  --s7: 3rem;

  --r-card: 6px;
  --r-chip: 3px;
  --hit: 48px;
  --measure: 43rem;

  /* motion: two gestures, and the answer never waits for either */
  --mo-draw: 320ms;
  --mo-lift: 200ms;
  --mo-ease: cubic-bezier(0.2, 0.7, 0.3, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --c-bg: #0d1412;
    --c-card: #16201e;
    --c-sunk: #101a18;
    --c-line: #2d3d39;
    --c-line-strong: #6b807a;

    --c-ink: #e8efec;
    --c-ink-2: #a5b7b1;

    --c-accent: #9dbdff;
    --c-accent-ink: #0d1412;
    --c-band: rgba(157, 189, 255, 0.16);
    --c-band-ideal: rgba(157, 189, 255, 0.36);

    --c-ok: #74d3a5;
    --c-warn: #ffa384;
    --c-ok-wash: #14241d;
    --c-warn-wash: #291711;

    --c-focus: #9dbdff;
    --c-focus-ring: #ffd23d;
  }
}