/* Gridform / Grid Lite. Shared by the application and the standalone handbook.
   These tokens style interface chrome only; document palettes stay in the engine. */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/GeistMono-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/GeistMono-500.woff2') format('woff2');
}

:root {
  --ui-font-mono: 'Geist Mono', ui-monospace, monospace;
  --ui-radius: 0px;
  --ui-border: 1px;
  --ui-space-1: 4px;
  --ui-space-2: 8px;
  --ui-space-3: 12px;
  --ui-space-4: 16px;
  --ui-control-height: 32px;
  --ui-bar-height: 48px;
  --ui-label-size: 10px;
  --ui-control-size: 12px;
  --ui-title-size: 11px;
  --ui-tracking: 0.08em;
  --ui-title-tracking: 0.14em;
  --ui-motion: 120ms;
  --ui-disabled: 0.4;
}

:root,
[data-theme='light'],
[data-x-skin='light'] {
  --paper: #fcfcfd;
  --surface: #ffffff;
  --surface-2: #f7f7f8;
  --surface-3: #eeeef0;
  --ink: #18181b;
  --ink-soft: #3f3f46;
  --muted: #606773;
  --faint: #626974;
  --line: #e9eaec;
  --line-strong: #d2d4d8;
  --accent: #c52c1c;
  --sel: #096fc4;
  --sel-soft: rgba(9, 111, 196, 0.06);
  --selected: var(--sel);
  --selected-ink: #ffffff;
  --ring: var(--sel);
  --shadow: none;
  --ui-ink-rgb: 24, 24, 27;
  --ui-surface-rgb: 255, 255, 255;
  --ui-paper-rgb: 252, 252, 253;
  color-scheme: light;
}

[data-theme='dark'],
[data-x-skin='dark'] {
  --paper: #0d0d10;
  --surface: #161619;
  --surface-2: #1d1d21;
  --surface-3: #27272c;
  --ink: #f4f4f5;
  --ink-soft: #cacad1;
  --muted: #a1a1ac;
  --faint: #9797a3;
  --line: #28282d;
  --line-strong: #3c3c43;
  --accent: #ff7b6c;
  --sel: #65b3ff;
  --sel-soft: rgba(101, 179, 255, 0.09);
  --selected: var(--sel);
  --selected-ink: #0d0d10;
  --ring: var(--sel);
  --shadow: none;
  --ui-ink-rgb: 244, 244, 245;
  --ui-surface-rgb: 22, 22, 25;
  --ui-paper-rgb: 13, 13, 16;
  color-scheme: dark;
}

/* The handbook follows the OS until its existing theme control sets a choice. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --paper: #0d0d10;
    --surface: #161619;
    --surface-2: #1d1d21;
    --surface-3: #27272c;
    --ink: #f4f4f5;
    --ink-soft: #cacad1;
    --muted: #a1a1ac;
    --faint: #9797a3;
    --line: #28282d;
    --line-strong: #3c3c43;
    --accent: #ff7b6c;
    --sel: #65b3ff;
    --sel-soft: rgba(101, 179, 255, 0.09);
    --selected-ink: #0d0d10;
    --ui-ink-rgb: 244, 244, 245;
    --ui-surface-rgb: 22, 22, 25;
    --ui-paper-rgb: 13, 13, 16;
    color-scheme: dark;
  }
}