/* Design tokens lifted from the Claude Design import ("Coop App Screens").
 *
 * The design owns layout, type scale, colour, spacing, component shape and
 * motion. Everything in this file is measured from that import so the UI reads
 * as the same product; behaviour and copy rules come from the product spec.
 */

:root {
  /* type */
  --font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* colour — ink */
  --ink: #0a2540; /* headings, body, the one dark colour */
  --ink-muted: #68737d; /* secondary values, sizes, units */
  --ink-faint: #9aa4af; /* echoed query, hints, labels */
  --ink-kicker: #60656b;

  /* colour — accent */
  --accent: #ff5a00;
  --accent-hot: #ff4d00;
  --accent-warm: #ffae5c;
  --accent-tint: #fff1e7;
  --accent-line: #ffe3d0;
  --accent-bg: #fffaf6;

  /* colour — semantic (values only; never a grade or a score) */
  --good: #18ab0a;
  --good-tint: #eaf7ea;

  /* colour — the walking screen's location strip and progress bar (design 2j).
   * Both were near-misses against existing tokens rather than reuses:
   * #dcdee3 is darker than --line-strong (#e6e6ea) because the two strip lines
   * have to read as fixtures at 16px tall, and #ffc9a8 is more saturated than
   * --accent-line (#ffe3d0) because it marks the CURRENT item against both a
   * full --accent bar and an empty --line-faint one, so it needs to sit visibly
   * between them. */
  --strip-line: #dcdee3;
  --progress-now: #ffc9a8;

  /* colour — surface */
  --paper: #ffffff;
  --paper-warm: #fffaf5;
  --paper-warmer: #fff7ef;
  --line: #ededef;
  --line-strong: #e6e6ea;
  --line-faint: #efeff1;
  --skeleton-a: #efeff2;
  --skeleton-b: #e7e7eb;
  --chip-bg: #f1f1f3;

  /* shape */
  --r-card: 22px;
  --r-tile: 20px;
  --r-control: 18px;
  --r-thumb: 14px;
  --r-chip: 24px;
  --r-pill: 999px;

  /* elevation */
  --shadow-card: 0 3px 14px rgba(0, 0, 0, 0.05);
  --shadow-tile: 0 2px 10px rgba(0, 0, 0, 0.04);
  --shadow-float: 0 4px 18px rgba(0, 0, 0, 0.09);
  --shadow-accent: 0 8px 24px rgba(255, 90, 0, 0.34);

  /* spacing — the design's rhythm */
  --pad-screen: 26px;
  --pad-card: 15px;
  --gap-s: 8px;
  --gap-m: 12px;
  --gap-l: 18px;

  /* ergonomics (§14): comfortably above platform minimums */
  --touch-min: 56px;

  /* the persistent surface reserves this much room at the bottom */
  --surface-h: 104px;
}

/* High contrast is a requirement, not a preference: retail lighting, arm's
 * length, possibly cold hands in a freezer aisle (§14 rule 7). The palette is
 * already high-contrast; this keeps it that way if the OS asks for more. */
@media (prefers-contrast: more) {
  :root {
    --ink-muted: #4a545d;
    --ink-faint: #6b7681;
    --line: #d5d5d9;
    --line-strong: #c9c9d0;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}