/* tokens.css - rebuild 2026-09-17: mock tokens verbatim + compat aliases */
:root {
  color-scheme: light;
  --background: #ffffff;
  --foreground: #171a14;        /* warm ink */
  --card: #f4f4ef;              /* warm grey: top strip, film band, foot */
  --card-foreground: #171a14;
  --muted: #e9eae2;             /* pressed segment, hover fill, input ground */
  --muted-foreground: #5c6157;
  --plate: #dcddd3;             /* the bench surface the canvas lies on */
  --primary: #4d7c0f;           /* the product mark's olive; the only accent */
  --primary-foreground: #ffffff;
  --primary-hover: #3f6a0b;
  --border: #dddfd4;
  --rule: #171a14;              /* grips, checkbox, caret: ink, never the accent */
  --destructive: #9a2c1b;
  --scrim: rgb(244 244 239 / .72);   /* lies over a frame that the trim range drops */
  --handle-bg: #171a14;
  --handle-ink: #ffffff;
  --shadow-raised: 0 1px 2px rgb(23 26 20 / .16);
  --shadow: 0 6px 16px -8px rgb(23 26 20 / .34);
  --radius: 4px;
  --radius-sm: 3px;
  --radius-xs: 2px;
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;
  /* Anton is the product's caption face; the fallback is the heaviest face already on the
     machine, so a capture taken without that font still shows the right weight. */
  --font-caption: Anton, "Arial Black", "Segoe UI Black", Impact, system-ui, sans-serif;
  --text-lg: 15px;
  --text-base: 14px;
  --text-num: 13px;
  --text-sm: 12px;
  --text-xs: 11px;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px;
  --strip-top: 48px;
  --rail: 280px;
  --film: 112px;      /* 8 + 72 thumb + 4 + 14 number + 8 scrub bar + 6 */
  --foot: 44px;
  --thumb: 72px;
  --row: 44px;
  --btn-h: 36px;
  --input-h: 36px;
  --target-min: 44px;
  --chip-h: 36px;
  --keep: 18px;
  --grip-w: 16px;
  --grip-h: 76px;
  --mark: 20px;
  --canvas-max: 512px;          /* 8 x 64px: a whole-number zoom, so the pixels stay square */
  --check: 16px;
  --hair: 1px;
  --ring: var(--primary);
  --duration-fast: 120ms;
  --duration-slide: 180ms;
  --duration-max: 300ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);

  /* The frames themselves: picture, not chrome. A sun arcs over a hill and the sky drifts,
     so neighbouring frames differ slightly and distant ones differ plainly. Deliberately no
     green: nothing in the picture may be mistaken for the accent. */
  --art-sky-h: 198;
  --art-sky-s: 44%;
  --art-sky-l: 80%;
  --art-sun: #f3c15c;
  --art-hill: #b08457;
  --art-ground: #6d5334;
  --caption-ink: #ffffff;
  --caption-edge: #101208;
  --mask-opaque: #000000;       /* alpha carrier for the film's run-off edge, never painted */
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --background: #12140f; --foreground: #e9ebe4; --card: #191c15; --card-foreground: #e9ebe4;
    --muted: #232619; --muted-foreground: #9aa091; --plate: #080906; --border: #2e3226;
    --rule: #e9ebe4;
    --primary: #a3e635; --primary-foreground: #14200a; --primary-hover: #bef264;
    --destructive: #f0836c;
    --scrim: rgb(18 20 15 / .74);
    --handle-bg: #e9ebe4; --handle-ink: #12140f;
    --shadow-raised: 0 1px 2px rgb(0 0 0 / .55); --shadow: 0 6px 16px -8px rgb(0 0 0 / .7);
    /* the picture does not change with the theme - only the bench around it does */
  }
}
/* @pair --foreground on --background */
/* @pair --muted-foreground on --background */
/* @pair --muted-foreground on --card */
/* @pair --muted-foreground on --muted */
/* @pair --primary-foreground on --primary */
/* @pair --handle-ink on --handle-bg */
/* @pair --caption-ink on --caption-edge */

/* Compat aliases for rate-widget and older chrome that still read the previous names. */
:root {
  --btn-height: var(--btn-h);
  --primary-muted: color-mix(in srgb, var(--primary) 14%, var(--background));
  --primary-muted-dropzone: color-mix(in srgb, var(--primary) 8%, var(--background));
  --border-width: var(--hair);
  --border-width-dropzone: var(--hair);
  --outline-width: 2px;
  --target-compact: 24px;
  --warning-foreground: #8a4b00;
  --rate-star-idle: var(--muted-foreground);
  --rate-star-lit: var(--primary);
  --icon: 18px;
  --bar-height: 4px;
  --radius-pill: 999px;
}


/* One frame at a time (owner rule): every focusable control draws its ring ON the border,
   never outside it; nothing falls back to the browser ring. Product rules may override. */
:where(input, select, textarea, button, [tabindex]):focus-visible {
  outline: var(--outline-width, 2px) solid var(--ring, currentColor);
  outline-offset: calc(-1 * var(--border-width, 1px));
}

:where(input, select, textarea)[aria-invalid='true']:focus-visible {
  outline-color: var(--destructive, currentColor);
}