/*
 * ── Tokens ────────────────────────────────────────────────────────────────
 *
 * Every colour on the site is one of these. Components never carry a hex
 * value: they say `bg-surface` or `text-fg-2`, and the theme decides.
 *
 * Warm paper and near-black ink rather than white and grey, DrBell teal as
 * the brand, and one marigold used for exactly two things -- the main call
 * to action and the "taken" tick. Every text pair was measured: ink and
 * ink-2 are AAA on every surface in both themes, everything else at least AA.
 * If you change one, re-measure it (see apps/web/README.md).
 *
 * One file for both surfaces: src/styles.css imports it into the bundle, and
 * the Worker's /help and /legal pages link it as /tokens.css.
 */
:root {
  --bg: #F6F2EA;
  --surface: #FFFDF8;
  --surface-2: #ECE5D8;
  --ink: #1A1814;
  --ink-2: #4F4A42;
  --ink-3: #6A6458;
  --line: rgba(26, 24, 20, 0.12);
  --brand: #025158;
  --brand-deep: #013A40;
  --brand-soft: #DCEBE7;
  --accent: #E9A23B;
  --accent-hover: #DB8F22;
  --on-accent: #1A1814;
  --late: #8F5609;
  --late-soft: #F6E7CC;
  --missed: #A33A17;
  --missed-soft: #F6DDD3;
  --ok: #166C47;
  --ok-soft: #D8EDE2;
  --plum: #2E1F28;
  --footer: #1A1814;
  --on-deep: #F6F2EA;
  --on-deep-2: #C3D6D2;
  --on-plum-2: #DCCBD4;
  --on-ink-2: #C9C2B6;
  /* Phone and browser frames: the hardware, not the theme. */
  --device: #151A19;
  --device-edge: #2A302E;
  /* The logo's letters (Wordmark, Mark). */
  --logo-ink: #025158;
  --shadow-float: 0 1px 2px rgba(0, 0, 0, 0.04), 0 24px 48px -32px rgba(0, 0, 0, 0.38);
  --shadow-float-lg: 0 1px 2px rgba(0, 0, 0, 0.05), 0 40px 80px -40px rgba(0, 0, 0, 0.5);
}

:root[data-theme='dark'] {
  --bg: #0D1211;
  --surface: #141B1A;
  --surface-2: #1B2423;
  --ink: #F1ECE3;
  --ink-2: #BDB6AA;
  --ink-3: #9C968B;
  --line: rgba(241, 236, 227, 0.12);
  --brand: #6BC1B8;
  --brand-deep: #0A3236;
  --brand-soft: #12302F;
  --accent: #F2B544;
  --accent-hover: #F6C466;
  --on-accent: #1A1814;
  --late: #E9A94A;
  --late-soft: #33260F;
  --missed: #F07A55;
  --missed-soft: #3A1A10;
  --ok: #4CC38A;
  --ok-soft: #10301F;
  --plum: #241820;
  --footer: #070A09;
  --on-deep: #F1ECE3;
  --on-deep-2: #BFD3CF;
  --on-plum-2: #D6C5CE;
  --on-ink-2: #C9C2B6;
  --device: #050707;
  --device-edge: #2A302E;
  --logo-ink: #F1ECE3;
  --shadow-float: 0 1px 2px rgba(0, 0, 0, 0.3), 0 24px 48px -28px rgba(0, 0, 0, 0.8);
  --shadow-float-lg: 0 1px 2px rgba(0, 0, 0, 0.3), 0 40px 80px -36px rgba(0, 0, 0, 0.9);
}