/* tokens from docs/design/rebuild-2026-09-17/mock-shared.css - lifted unchanged (brief 2026-09-17). */
:root {
  color-scheme: light;
  --background: #fdfbf7;        /* the desk blotter the form is written on */
  --foreground: #211c16;        /* warm ink */
  --card: #f4efe6;              /* strips, group grounds, field fill, table head */
  --card-foreground: #211c16;
  --muted: #ece5d9;             /* hover fills, chosen row wash, chip ground */
  --muted-foreground: #665d50;
  --desk: #e6ded0;              /* the desk the sheet lies on */
  --paper: #ffffff;             /* the sheet, and it stays paper in both themes */
  --paper-ink: #1a1713;
  --paper-rule: #cfc6b6;        /* hairline ruling on the sheet */
  --paper-muted: #6b6255;       /* quiet ink on the sheet: the sheet is paper in both themes */
  --ghost: #e9e3d8;             /* the skeleton bars of an unfilled sheet */
  --primary: #3f4fae;           /* ink blue, deepened from the product mark; the only accent */
  --primary-foreground: #ffffff;
  --primary-hover: #33409a;
  --border: #ded5c6;
  --rule: #211c16;              /* the ink rule of a chosen row: ink, never the accent */
  --ring: var(--primary);
  --shadow-raised: 0 1px 2px rgb(33 28 22 / .12);
  --shadow: 0 8px 20px -10px rgb(33 28 22 / .34);
  --shadow-paper: 0 1px 1px rgb(33 28 22 / .10), 0 10px 28px -14px rgb(33 28 22 / .45);
  --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;
  --text-lg: 15px;
  --text-base: 14px;
  --text-num: 13px;
  --text-sm: 12px;
  --text-xs: 11px;
  --text-mono: 11px;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px;
  --strip-top: 48px;
  --form-col: 420px;
  --row: 44px;
  --head-row: 22px;
  --ac-row: 38px;
  --recent-row: 36px;
  --btn-h: 36px;
  --target-min: 44px;
  --foot-h: 34px;
  --mark: 20px;
  --mark-radius: 5px;
  --glyph-h: 30px;
  --glyph-w: 23px;
  --glyph-tape-w: 13px;
  --col-qty: 40px;
  --col-price: 56px;
  --col-line: 52px;
  --col-rm: 28px;
  --paper-w: 8.5;               /* letter; tape is 80 / 240, a4 is 210 / 297 */
  --paper-h: 11;
  --hair: 1px;
  --duration-fast: 120ms;
  --duration-slide: 180ms;
  --duration-max: 300ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --background: #17140f; --foreground: #eae4d9; --card: #1f1b15; --card-foreground: #eae4d9;
    --muted: #2a251d; --muted-foreground: #a79c8c; --desk: #100e0a; --border: #3a332a;
    --rule: #eae4d9; --ghost: #dcd4c4;
    --paper: #f3efe7; --paper-ink: #1a1713; --paper-rule: #c6bdac; --paper-muted: #6b6255;
    --primary: #8f9dea; --primary-foreground: #14162e; --primary-hover: #aab4f0;
    --shadow-raised: 0 1px 2px rgb(0 0 0 / .55);
    --shadow: 0 8px 20px -10px rgb(0 0 0 / .7);
    --shadow-paper: 0 1px 1px rgb(0 0 0 / .5), 0 12px 30px -14px rgb(0 0 0 / .8);
  }
}

/* Supplemental names used by shared lib surfaces (welcome, rate widget, focus). Do not redefine mock keys. */
:root {
  --border-width: var(--hair);
  --btn-height: var(--btn-h);
  --destructive: #b3261e;
  --destructive-foreground: #ffffff;
  --icon: 18px;
  --outline-width: 2px;
  --primary-muted: color-mix(in srgb, var(--primary) 12%, white);
  --rate-star-idle: #cfc6b6;
  --rate-star-lit: var(--primary);
  --target-compact: 24px;
  --step: 8px;
  --text-number: 22px;
  --tracking-number: 0.04em;
}

/* @pair --foreground on --background */
/* @pair --card-foreground on --card */
/* @pair --muted-foreground on --background */
/* @pair --muted-foreground on --card */
/* @pair --primary-foreground on --primary */
/* @pair --destructive-foreground on --destructive */
/* @pair --primary on --primary-muted */
/* @pair --primary on --background */

/* One frame at a time (owner rule 10.09): 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);
}