/* Design tokens: DESIGN.md ("After Hours"). Change DESIGN.md first, then this file. */

:root {
  /* Colors */
  --bg: #0c1210;
  --surface: #121b17;
  --line: #23322b;
  --text: #e9f2ee;
  --text-muted: #9fb3aa;
  --accent: #3ddc9a; /* flat; never a glow or halo */
  --on-accent: #04130c;
  --danger: #ff8a7a; /* errors only */
  --selection: rgb(61 220 154 / 0.3); /* --accent at 30% */

  /* One design pixel, in rem, so every size follows the iOS text-size setting.
     Root is 16px on most browsers; with -apple-system-body (app.css) it is 17px. */
  --px: calc(1rem / 16);

  /* Type */
  --font-display: "Archivo", "Arial Black", system-ui, sans-serif; /* dish names only, weight 900 */
  --font-body: "Instrument Sans", system-ui, -apple-system, sans-serif;
  --display-size: calc(46 * var(--px));
  --display-min: calc(32 * var(--px));
  --display-step: calc(2 * var(--px));
  --display-leading: 0.98;
  --display-tracking: -0.02em;
  --display-max-lines: 3;
  --body-size: calc(17 * var(--px));
  --body-leading: 1.45;
  --label-size: calc(13 * var(--px));
  --label-tracking: 0.2em;

  /* Space: 4 · 8 · 12 · 16 · 22 · 32 · 48; screen side padding 22 */
  --space-1: calc(4 * var(--px));
  --space-2: calc(8 * var(--px));
  --space-3: calc(12 * var(--px));
  --space-4: calc(16 * var(--px));
  --space-5: calc(22 * var(--px));
  --space-6: calc(32 * var(--px));
  --space-7: calc(48 * var(--px));
  --gutter: var(--space-5);

  /* Shape: buttons 14, chips 999, nothing else rounded, no shadows */
  --radius-button: calc(14 * var(--px));
  --radius-chip: 999px;

  /* Motion: the one authored moment */
  --motion-duration: 180ms;
  --motion-ease: ease-out;
  --motion-rise: calc(8 * var(--px));

  /* Layout and targets */
  --tap-min: 44px;
  --tabbar-height: 56px;
  --max-width: 480px;
  --focus-ring: 2px solid var(--accent);
  --focus-offset: 2px;
}

@supports (font: -apple-system-body) {
  :root {
    --px: calc(1rem / 17);
  }
}