/* 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;

  /* The black of the frames' filled controls (2b's two answer buttons, 2m/2n's
   * "Add to list" pill, the listening screen's "Type instead"). NOT `--ink`:
   * that is the navy #0a2540 and reads visibly blue at fill size beside this.
   *
   * The frames disagree with themselves — 2b paints #0A0A0C and 2m/2n paint
   * #090909, 11/255 apart summed across channels — which is one colour drawn
   * twice rather than two decisions. #0a0a0c wins because app.css already
   * hardcoded it twice (`.btn--primary`, `.rx-btn--primary`) before this token
   * existed, so adopting the other value would have made the codebase carry
   * both. */
  --ink-black: #0a0a0c;

  /* colour — accent */
  --accent: #ff5a00;
  /* Accent-coloured TEXT on a tinted ground, dark enough to read at 15px — the
   * unselected preference chips of design 3k. `--accent` itself is a fill colour and
   * MEASURED 2.95:1 on `--paper-warmer`, below AA for body text; this measures
   * 4.65:1 on the same ground. Text only: never used as a fill. */
  --accent-ink: #b4551f;
  --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;

  /* FRAMES 19a-19e, THE UP NEXT CARDS. Frame values, taken from the design's own
   * style attributes — not derived, and not to be moved without a ruling.
   *
   * `--marker-green` IS NOT `--good` (#18ab0a). The frame draws #1da05b, which is
   * measurably cooler, and the two are used for different things: `--good` is the
   * app's success colour, this is the colour of an EARNED nutrition marker on line
   * 5. Collapsing them would make a design change look like a refactor.
   *
   * `--card-line` (#f1f1f4) is likewise a shade off `--line-faint` (#efeff1). Kept
   * separate for the same reason: the frame is the source and the near-miss is not
   * evidence they are the same value.
   *
   * THERE IS NO `--shot-line`. It existed for a border on the packshot, which the
   * standing product ruling forbids on every surface — see the note in app.css. */
  --marker-green: #1da05b;
  --marker-sep: #c6ccd3;
  --rec-chip: #ffd84d;
  --card-line: #f1f1f4;

  /* FRAME 19c, the no-photo tile. IT KEEPS ITS BORDER, and the product ruling
   * against frames does not reach it: that ruling is about a PRODUCT IMAGE reading
   * as a floating object, and this is not an image — it is the designed slot that
   * stands in for one when there is none. The border and fill are what make it read
   * as a slot rather than as a grey blob, and frame 19c draws both. ~38% of records
   * have no image, so this is the common case, not an error state.
   *
   * FLAGGED rather than assumed: if the ruling is meant to cover the tile too, this
   * is the line to change, and the tile should then lose its border and keep its
   * fill (a `background` "STAYS and is not part of the frame", per 28801fb). */
  --tile-bg: #f1f4f8;
  --tile-line: #e4e9ef;
  --tile-ink: #b3becc;

  /* The Buy-1-Get-1 badge of design 3n. THE ONLY YELLOW IN THIS PALETTE, and it
   * cannot be derived from anything already here — `--good` is green and `--accent`
   * is orange — so it is a token rather than a near-miss reuse.
   *
   * The frame paints #fff on it. MEASURED in the browser: 1.48:1, which fails WCAG
   * AA outright and is close to invisible. It is used with `--ink` instead, measured
   * 10.49:1 on the same yellow — a legibility decision rather
   * than a design change: the colour is the brand's, the contrast is not optional in
   * the retail lighting §14 is written for. */
  --promo-bogo: #ffcf0c;

  /* 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 bottom band ──────────────────────────────────────────────────────
   * BOTH OF THESE ARE FIRST-PAINT FALLBACKS. `layout.js` measures the rendered
   * surface and the whole bottom-anchored band on load, on resize, on
   * orientationchange and on every navigation, and publishes both as inline
   * custom properties on `<html>` — which outrank these.
   *
   * 104 -> 98, AND THE OLD VALUE WAS NEVER THE SURFACE'S HEIGHT. MEASURED at
   * 393x646: `.surface` renders 98px, so every rule reserving
   * `calc(var(--surface-h) + 16px)` was holding 120 for a 98px object and every
   * rule pinning something at `calc(var(--surface-h) - 2px)` was 6px out. 98 is
   * the browser reading, where `env(safe-area-inset-bottom)` is 0; on a handset
   * the inset is real and the surface is taller, which is exactly why the number
   * has to be measured rather than written down.
   *
   * `--bottom-h` DEFAULTS TO THE SURFACE ALONE. On first paint the only thing
   * anchored to the bottom is the surface, and the list pill and the walking CTA
   * are both painted later — so the fallback is right for the moment it covers,
   * and every rule reads `--bottom-h` with `--surface-h` as its own fallback so a
   * page with JS disabled still reserves the surface. */
  --surface-h: 98px;
  --bottom-h: var(--surface-h);

  /* ── the nav-bar recorder (design 11c/11g) ────────────────────────────────
   * Five colours the palette genuinely did not have. Each is checked against
   * the nearest existing token rather than assumed new:
   *   --rec-bg   #fbf8f3 vs --paper-warm  #fffaf5 — warmer and a shade darker,
   *              because the recorder sits ON --paper-warm and has to read as a
   *              raised object against it, not blend into it;
   *   --rec-line #efeae1 vs --line        #ededef — the warm counterpart of the
   *              neutral hairline, to match the warm ground above;
   *   --rec-idle #b9bcc1 is the waveform slot that holds no sample yet, and
   *   --rec-live #5c6169 the slot that does. They are one step either side of
   *              --ink-muted #68737d and the CONTRAST BETWEEN THEM is the whole
   *              signal — written vs not-yet-written — so neither can collapse
   *              onto the token in the middle.
   *   --rec-x    #8a9199 sits between --ink-muted and --ink-faint; it is the
   *              dismiss glyph, deliberately quieter than the stop control it
   *              shares a bar with. */
  --rec-bg: #fbf8f3;
  --rec-line: #efeae1;
  --rec-idle: #b9bcc1;
  --rec-live: #5c6169;
  --rec-x: #8a9199;

  /* The modals' two greys (11b/11d/11e). --sheet-chip is the round close button
   * and --sheet-field the typing field's ground; --chip-bg #f1f1f3 is a third
   * value between them and reusing it for either would have moved the design. */
  --sheet-chip: #f4f4f6;
  --sheet-field: #f7f7f9;
  --sheet-rule: #f0f0f2;

  /* How far the home screen's lower cards and the nav bar travel DOWNWARD when
   * the listening surface takes over (11a). INFERRED, not taken: the frames bind
   * this to `{{ spkTilesT }}` / `{{ spkNavT }}` and no binding VALUES exist
   * anywhere in the design document, so the only resolved downward travel in the
   * whole turn is 11c's hidden "Type instead" at translateY(46px). That is the
   * number, reused, rather than one invented next to it. */
  --vs-slide: 46px;
}

/* 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;
  }
}