/* tokens.css — from docs/design/rebuild-2026-09-17/mock-shared.css (:root + dark).
 * Dark theme follows prefers-color-scheme only; no in-product toggle.
 * Component rules live in entrypoints/workspace/style.css.
 */
:root {
  color-scheme: light;
  --background: #ffffff;
  --foreground: #1f2328;
  --card: #faf8f6;              /* warm paper grey: strips, book column, inert fills */
  --card-foreground: #1f2328;
  --muted: #efece8;             /* hover fills, the current chapter row */
  --muted-foreground: #5c5550;
  --field: #f7f4f0;             /* the warm light field the proof sheet lies on */
  --paper: #ffffff;             /* the sheet itself */
  --hairline: #e3ddd6;          /* the sheet's 1px edge */
  --border: #e3ddd6;
  --ink: #2b2723;               /* text printed on the sheet */
  --ink-soft: #6b6560;          /* dotted head placeholder, printed folio */
  --primary: #c2410c;
  --primary-hover: #9a3412;
  --primary-foreground: #ffffff;
  --primary-deep: #9a3412;      /* the accent when it has to be text on a light fill */
  --bookmark: #9c5a4d;          /* the accent's muted sibling: the contents tab */
  --bookmark-foreground: #ffffff;
  --ring: var(--primary);
  --radius: 12px;
  --radius-sm: 8px;
  --radius-xs: 6px;
  --radius-paper: 2px;
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-serif: Georgia, "Times New Roman", serif;
  --text-xs: 10px;
  --text-11: 11px;
  --text-sm: 12px;
  --text-base: 14px;
  --text-count: 15px;
  --text-lg: 16px;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px;
  --strip-top: 48px;
  --strip-bottom: 60px;
  --book-col: 280px;
  --stage-pad: 148px;           /* clearance for the outside marker and the spine bookmark */
  --page-clear: 48px;
  --control-h: 28px;
  --control-inset: 3px;
  --btn-h: 36px;
  --icon: 36px;
  --icon-sm: 20px;
  --icon-glyph: 14px;
  --target-min: 44px;
  --mark: 22px;
  --mark-radius: 5px;
  --tab-h: 22px;
  --tab-side-w: 40px;
  --stepper-h: 26px;
  --switch-w: 32px; --switch-h: 18px; --switch-knob: 12px; --switch-pad: 2px; --switch-travel: 14px;
  --switch-sm-w: 24px; --switch-sm-h: 14px; --switch-sm-knob: 10px; --switch-sm-pad: 1px; --switch-sm-travel: 10px;
  --bookmark-w: 86px;
  --bookmark-h: 26px;
  --breaker-w: 124px;
  --progress-h: 3px;
  --toc-h: 28px;
  --cover-sm: 56px;
  --art-title: 46px;            /* user units inside the 300 x 450 cover artwork */
  --art-author: 15px;
  --duration-fast: 120ms;
  --duration-redraw: 200ms;
  --duration-max: 300ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --shadow: 0 6px 16px -8px rgb(43 39 35 / .30);
  --shadow-raised: 0 1px 2px rgb(43 39 35 / .14);
  --shadow-sheet: 0 12px 28px -12px rgb(43 39 35 / .32), 0 2px 5px -3px rgb(43 39 35 / .20);
  --shadow-tab: 0 2px 5px -2px rgb(43 39 35 / .36);
  /* the sheet is sized once, here: height binds on wide viewports, width on narrow ones */
  --chrome-v: calc(var(--strip-top) + var(--strip-bottom) + var(--page-clear) * 2
                 + var(--control-h) + var(--icon) + var(--space-5) * 2);
  --sheet-w-max: calc(100vw - var(--book-col) - var(--stage-pad) * 2);
  --sheet-w: min(calc((100vh - var(--chrome-v)) * 210 / 297), var(--sheet-w-max));
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --background: #1a1714; --foreground: #ece7e0; --card: #211d19; --card-foreground: #ece7e0;
    --muted: #2c2823; --muted-foreground: #a8a099; --field: #1e1b17; --paper: #201d19;
    --hairline: #3a352f; --border: #35302a; --ink: #e6e1da; --ink-soft: #a29a92;
    --primary: #f97316; --primary-hover: #fb923c; --primary-foreground: #24120a; --primary-deep: #fdba74;
    --bookmark: #c2766a; --bookmark-foreground: #2a1512;
    --shadow: 0 6px 16px -8px rgb(0 0 0 / .66);
    --shadow-raised: 0 1px 2px rgb(0 0 0 / .55);
    --shadow-sheet: 0 12px 28px -12px rgb(0 0 0 / .72), 0 2px 5px -3px rgb(0 0 0 / .5);
    --shadow-tab: 0 2px 5px -2px rgb(0 0 0 / .6);
  }
}
/* @pair --foreground on --background */
/* @pair --foreground on --card */
/* @pair --muted-foreground on --background */
/* @pair --muted-foreground on --card */
/* @pair --muted-foreground on --field */
/* @pair --primary-foreground on --primary */
/* @pair --primary-deep on --muted */
/* @pair --bookmark-foreground on --bookmark */
/* @pair --ink on --paper */
/* @pair --ink-soft on --paper */

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