/* Folio. A paper-white worksheet on a cool desk, folded lavender, plum ink. */
:root {
  color-scheme: light;
  --background: #edf1f5;
  --foreground: #474264;
  --card: #f9fafb;
  --card-foreground: #474264;
  --muted: #eae4f5;
  --muted-foreground: #6c637f;
  --paper: #fffef8;
  --paper-ink: #474264;
  --rule: #7b708f;
  --rule-strong: #62517e;
  --primary: #62517e;
  --primary-foreground: #ffffff;
  --primary-hover: #51416e;
  --border: #dcd7e5;
  --ring: #62517e;
  --chip: #eae4f5;
  --chip-ink: #62517e;
  --destructive: #a23b43;
  --error-ground: #fff0ef;
  /* One scale: 13 x phi^(k/2), rounded. Spacing prefers the Fibonacci steps. */
  --phi-3: 3px; --phi-4: 4px; --phi-5: 5px; --phi-6: 6px; --phi-8: 8px; --phi-10: 10px;
  --phi-13: 13px; --phi-17: 17px; --phi-21: 21px; --phi-27: 27px; --phi-34: 34px;
  --phi-43: 43px; --phi-55: 55px; --phi-89: 89px; --phi-144: 144px;
  --radius: var(--phi-17);
  --radius-sm: var(--phi-10);
  --radius-xs: var(--phi-6);
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --text-base: var(--phi-13); --text-lg: var(--phi-17); --text-sm: var(--phi-13); --text-xs: var(--phi-10);
  --text-count: var(--phi-13); --text-cell: var(--phi-13); --text-num: var(--phi-10); --text-sheet-title: var(--phi-21);
  --space-1: var(--phi-3); --space-2: var(--phi-8); --space-3: var(--phi-13); --space-4: var(--phi-13); --space-5: var(--phi-21); --space-6: var(--phi-21);
  --strip-top: 70px; --rail-w: 354px; --rail-pad: var(--phi-21); --sheet-pad: var(--phi-21);
  --paper-ratio: 17 / 22; --cell-cw: 34px; --cell-ws: 21px;
  --control-h: var(--phi-34); --btn-h: var(--phi-34); --target-min: var(--phi-43); --field-h: var(--phi-34);
  --textarea-h: var(--phi-144); --icon-glyph: 16px; --mark: var(--phi-43); --mark-radius: var(--phi-13); --check: var(--phi-17);
  --duration-fast: 150ms; --ease: cubic-bezier(.2, 0, 0, 1);
  --shadow-sheet: 0 5px 0 #e3dcee, 0 14px 36px -25px #62517e45;
  --shadow-raised: 0 2px 5px #4742640d;
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --background: #201e29; --foreground: #e8e3f3;
    --card: #292634; --card-foreground: #e8e3f3;
    --muted: #3c334f; --muted-foreground: #b8afca;
    --paper: #2e293b; --paper-ink: #f3eefb;
    --rule: #9f90b9; --rule-strong: #cdb7ed;
    --primary: #c8b0e9; --primary-foreground: #2a203a; --primary-hover: #dac5f6;
    --border: #494154; --ring: #dac5f6; --chip: #3c334f; --chip-ink: #d4c0ee;
    --destructive: #ffadaf; --error-ground: #442a34;
    --shadow-sheet: 0 5px 0 #3b324f, 0 14px 36px -25px #0009;
  }
}

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