/*
 * GOOD Measure — design tokens. STYLE.md §8.2, verbatim.
 *
 * ⚠️ THIS FILE IS THE ONLY PLACE A COLOUR, RADIUS OR SPACING VALUE APPEARS.
 *
 * STYLE §8.2 gives the `:root` block and the dark-mode override literally, and this is
 * that block. Everything else in `apps/measure/web/` reads `var(--…)` and never a hex
 * value — STYLE §8.3's parity checklist compares this surface against the Pro app and
 * the App Clip on lime value, black-on-lime, hairline borders, pill height, Inter
 * weights and the two radii, and *"any drift is fixed in the deviating surface, not by
 * changing the token."* A one-off `#A6FF00` somewhere in a stylesheet is drift that no
 * checklist can find.
 *
 * ⚠️ AND THE NAMES MIRROR `apps/admin/styles/tokens.css` ON PURPOSE. STYLE §8.2: *"the
 * admin app's `tokens.css` naming so the two web surfaces can share components later."*
 */

:root {
  --background: #FAFAFA;
  --surface: #FFFFFF;
  --surface-elevated: #F4F4F5;
  --border: #E4E4E7;
  --border-strong: #D4D4D8;
  --text-primary: #09090B;
  --text-secondary: #71717A;
  --text-tertiary: #8E8E98;
  --primary: #A6FF00;
  --primary-foreground: #000000;
  --primary-ink: #3C5C00;
  --primary-wash: rgba(166, 255, 0, .28);
  --success: #15803D;
  --warning: #B45309;
  --error: #DC2626;
  --info: #1D4ED8;
  --notice-surface: #18181B;
  --on-notice: #FAFAFA;
  --scrim: rgba(0, 0, 0, .54);
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 20px;
  --r-xl: 24px;
  --r-xxl: 28px;
  --r-pill: 9999px;
  --s-xs: 4px;
  --s-sm: 8px;
  --s-md: 16px;
  --s-lg: 20px;
  --s-xl: 24px;
  --s-xxl: 28px;
  --font: 'Inter', system-ui, -apple-system, sans-serif;

  /* ── Tokens STYLE §8.2's block does not list, added here rather than inline ──
   *
   * The CSS block in §8.2 is the colour and shape set. These four are values §3.1,
   * §3.3, §3.4 and §4.4 state in prose, and they belong in the token file for the same
   * reason the colours do — a `12px` grid gap written inline in three stylesheets is
   * three chances to make it 10.
   */
  --s-grid-gap: 12px;         /* §3.1 `gridGap` */
  --motion-fast: 150ms;       /* §3.4 */
  --motion-normal: 250ms;     /* §3.4 */
  --motion-slow: 350ms;       /* §3.4 */
  --curve-default: cubic-bezier(.215, .61, .355, 1);  /* §3.4 easeOutCubic */
  --button-height: 52px;      /* §4.4 primary and outline pill */
  --pill-height: 22px;        /* §4.6 confidence pill */
  --chip-height: 36px;        /* §4.5 */

  /* ⚠️ §3.3: "Zero elevation everywhere in dark mode and on camera. Light mode: sheets
   * and dialogs get elevation 3 with `shadowColor`. Cards NEVER have shadow in either
   * mode — the `border` hairline is the edge." So there is exactly one shadow token and
   * it is only ever applied to a sheet. */
  --shadow-sheet: 0 8px 24px rgba(0, 0, 0, .10);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --background: #0A0A0A;
    --surface: #131314;
    --surface-elevated: #1A1A1A;
    --border: rgba(255, 255, 255, .06);
    --border-strong: rgba(255, 255, 255, .12);
    --text-primary: #FFFFFF;
    --text-secondary: #8A8A8A;
    --text-tertiary: #5A5A5A;
    --primary-ink: #A6FF00;
    --primary-wash: rgba(166, 255, 0, .15);
    --success: #22C55E;
    --warning: #F59E0B;
    --error: #EF4444;
    --info: #3B82F6;
    --notice-surface: #1A1A1A;
    --on-notice: #FFFFFF;
    --scrim: rgba(0, 0, 0, .70);

    /* §3.3: no shadow in dark mode, at all. */
    --shadow-sheet: none;
  }
}

/* Camera page forces the dark block regardless of scheme. STYLE §1.3, §8.2. */
.camera {
  color-scheme: dark;
}