/* Caret, owner-selected second round. Original pixel geometry, system text. */
:root {
  color-scheme: light;
  --background: #ffffff;
  --foreground: #140e0c;
  --page: #e9edef;
  --card: #f3f5f5;
  --card-foreground: #140e0c;
  --muted: #e9edef;
  --muted-foreground: #555b5e;
  --pleat: #f3f5f5;
  --primary: #f2d23a;
  --primary-foreground: #140e0c;
  --primary-hover: #ffe463;
  --destructive: #ba291b;
  --destructive-foreground: #ffffff;
  --border: #d3d9dc;
  --frame: #140e0c;
  --ink: #140e0c;
  --paper: #ffffff;
  --cyan: #3ec6c6;
  --yellow: #f2d23a;
  --red: #f2422b;
  --ring: #087b82;
  --del: #ffede9; --del-ink: #140e0c; --del-strong: #f2422b;
  --add: #e5f8f8; --add-ink: #140e0c; --add-strong: #3ec6c6;
  --mov: #fff7ce; --mov-ink: #140e0c; --mov-strong: #f2d23a;
  --radius: 0; --radius-sm: 0; --radius-xs: 0;
  --font-sans: Arial, Helvetica, system-ui, sans-serif;
  --font-mono: ui-monospace, 'Cascadia Mono', Consolas, 'SF Mono', monospace;
  --text-base: 14px; --text-lg: 16px; --text-sm: 12px; --text-mono: 13px; --text-count: 28px;
  --line: 30px;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px;
  --rail: 40px; --spine: 76px; --spine-narrow: 28px;
  --pleat-h: 36px; --control-h: 40px; --btn-h: 44px; --icon: 32px; --icon-glyph: 16px;
  --check: 16px; --target-min: 44px;
  --duration-fast: 120ms; --duration-pleat: 200ms; --duration-merge: 240ms; --duration-max: 300ms;
  --ease: steps(2, end);
  --shadow: 6px 6px 0 var(--frame);
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --page: #1b1c1d; --background: #242628; --foreground: #f3f5f5;
    --card: #2e3032; --card-foreground: #f3f5f5; --muted: #35383a;
    --muted-foreground: #bcc2c5; --pleat: #2e3032; --border: #4e5457; --frame: #8d8a84;
    --ring: #f2d23a;
    --del: #48251f; --del-ink: #f3f5f5; --del-strong: #f2422b;
    --add: #183f3f; --add-ink: #f3f5f5; --add-strong: #3ec6c6;
    --mov: #423d1d; --mov-ink: #f3f5f5; --mov-strong: #f2d23a;
    --destructive: #ff9a8b; --destructive-foreground: #140e0c;
  }
}
/* @pair --foreground on --background */
/* @pair --muted-foreground on --background */
/* @pair --muted-foreground on --card */
/* @pair --muted-foreground on --pleat */
/* @pair --primary-foreground on --primary */
/* @pair --del-ink on --del */
/* @pair --add-ink on --add */
/* @pair --mov-ink on --mov */

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