/*
  Wayfind design tokens — the single source for colour, type and motion.
  See BRAND.md for why each of these is what it is; the short version:

    the mark is a muted track with a shorter amber range inside it, and
    everything below defers to that one idea.

  Import once, near the top of an app's stylesheet, then style through the
  tokens. Never hard-code a hex from this file into a component: a colour
  that appears in two places drifts in one of them.
*/

:root {
  /* --- Ground and ink ------------------------------------------------- */
  /* Day. Warm paper, not white — this gets held outdoors. */
  --wf-paper: #faf9f6;
  --wf-paper-raised: #ffffff;
  --wf-paper-sunk: #f0ede5;

  --wf-ink: #14161d;
  --wf-ink-soft: #4a4f5c;
  /* 4.86:1 on --wf-paper. The obvious #6f7686 measures 4.33 and fails AA on
     paper while passing on a raised white panel — a token legible inside a
     card and not underneath it is a trap, so this one clears both. */
  --wf-ink-faint: #676e7d;
  --wf-rule: #e4e0d6;

  /* A control that sits ON a card. --wf-paper-sunk is darker than paper in
     both themes, so at night a secondary button had nothing to sit on and
     two native apps independently reached for --wf-rule as a fill. That
     agreement was a missing token, not a coincidence. */
  --wf-control: #ece8de;

  /* --- The range ------------------------------------------------------ */
  /* Amber is scarce on purpose. If two things on a screen are amber, one of
     them is lying about being the live thing. `deep` is the only amber that
     survives as text on paper; `--wf-amber` itself is for marks, strokes and
     fills where it sits on ink. */
  --wf-amber: #ffc940;
  --wf-amber-deep: #9a5b00;
  --wf-amber-wash: #fdf0d4;
  /* Amber legible on a surface filled with the *primary* colour, which
     inverts with the theme. --wf-amber-deep is "amber on this theme's
     paper", so the moment something fills with ink it is the wrong amber:
     Android's nav banner measured 1.24:1 before this existed. 11.77:1 here. */
  --wf-amber-on-ink: #ffc940;

  /* --- Outcomes, never accents ---------------------------------------- */
  /* Green means a delivery settled. A green button that merely submits a
     form steals that word from the delivery that actually settled. */
  --wf-settled: #2e7d5b;
  --wf-settled-wash: #e3f1ea;
  --wf-clay: #ae4a3c;
  --wf-clay-wash: #f7e6e3;

  /* The track: everything that is not the highlighted range. */
  --wf-track: rgb(20 22 29 / 0.28);

  /* --- Type ----------------------------------------------------------- */
  /* Archivo for everything read as language, Plex Mono for everything read
     aloud or retyped — fingerprints, order refs, waybills. A font where 0/O
     and 1/l blur turns a device check into a coin flip. */
  --wf-font: "Archivo Variable", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --wf-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* One loud voice. --wf-size-answer exists for the arrival time and for
     nothing else; spending it elsewhere spends the loudest thing in the
     system on something that is not the answer the page was opened for. */
  --wf-size-fine: 0.75rem;
  --wf-size-small: 0.875rem;
  --wf-size-body: 1rem;
  --wf-size-lead: 1.25rem;
  --wf-size-title: 1.75rem;
  --wf-size-display: 2.5rem;
  --wf-size-answer: 6rem;

  --wf-tracking-caps: 0.14em;
  --wf-tracking-wordmark: 0.08em;

  /* --- Space and shape ------------------------------------------------ */
  --wf-radius: 14px;
  --wf-radius-lg: 22px;
  --wf-radius-mark: 24px;

  /* --- Motion --------------------------------------------------------- */
  /* Movement means a value changed. Nothing loops; nothing breathes. */
  --wf-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --wf-settle: 180ms;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Night is designed, not inverted. Warm off-white on ink, because a
       windscreen at 21:00 is the real case and #FFF on black is a headlight. */
    --wf-paper: #14161d;
    --wf-paper-raised: #1b1f28;
    --wf-paper-sunk: #101219;

    --wf-ink: #ece7dc;
    --wf-ink-soft: #b4b3ac;
    --wf-ink-faint: #8b9099;
    --wf-rule: #2a2f3a;
    /* At night the raised control is the rule colour: both native apps
       reached for it independently before the token existed. */
    --wf-control: #2a2f3a;

    /* On ink, amber carries itself — the deep variant would disappear. */
    --wf-amber-deep: #ffc940;
    --wf-amber-wash: #33261280;

    --wf-settled: #55b08a;
    --wf-settled-wash: #1b3a2e80;
    --wf-clay: #d97c6e;
    --wf-clay-wash: #3a201c80;

    --wf-track: rgb(250 249 246 / 0.28);
  }
}

:root[data-theme="light"] {
  --wf-paper: #faf9f6;
  --wf-paper-raised: #ffffff;
  --wf-paper-sunk: #f0ede5;
  --wf-ink: #14161d;
  --wf-ink-soft: #4a4f5c;
  --wf-ink-faint: #676e7d;
  --wf-rule: #e4e0d6;
  --wf-control: #ece8de;
  --wf-amber-deep: #9a5b00;
  --wf-amber-wash: #fdf0d4;
  --wf-settled: #2e7d5b;
  --wf-settled-wash: #e3f1ea;
  --wf-clay: #ae4a3c;
  --wf-clay-wash: #f7e6e3;
  --wf-track: rgb(20 22 29 / 0.28);
}

:root[data-theme="dark"] {
  --wf-paper: #14161d;
  --wf-paper-raised: #1b1f28;
  --wf-paper-sunk: #101219;
  --wf-ink: #ece7dc;
  --wf-ink-soft: #b4b3ac;
  --wf-ink-faint: #8b9099;
  --wf-rule: #2a2f3a;
  --wf-control: #2a2f3a;
  --wf-amber-deep: #ffc940;
  --wf-amber-wash: #33261280;
  --wf-settled: #55b08a;
  --wf-settled-wash: #1b3a2e80;
  --wf-clay: #d97c6e;
  --wf-clay-wash: #3a201c80;
  --wf-track: rgb(250 249 246 / 0.28);
}

/* Numerals that do not jitter as they count down. The arrival time is the
   one number on the page that changes while someone is watching it. */
.wf-numeric {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* Read aloud or retyped: fingerprints, order references, waybills. */
.wf-code {
  font-family: var(--wf-font-mono);
  font-variant-ligatures: none;
  letter-spacing: 0.02em;
}

.wf-wordmark {
  font-family: var(--wf-font);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--wf-tracking-wordmark);
}

@media (prefers-reduced-motion: reduce) {
  :root { --wf-settle: 1ms; }
}