/* Shared site design tokens. Components consume these; sample themes use --sample-*.
   Controls share one radius. Floating panels add their inset to that radius. */
:root {
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --content-width: 90rem;
  --reading-width: 48rem;
  --page-nav-width: 13rem;
  --nav-row-height: 3.5rem;
  --font-ui: InterVariable, system-ui, sans-serif;
  --font-control: 1rem;
  --font-control-compact: .875rem;
  --radius-control: .25rem;
  --panel-inset: var(--space-2);
  --radius-panel: calc(var(--radius-control) + var(--panel-inset));
  --radius-circle: 50%;
  --border-width: 1px;
  --control-height: 3.25rem;
  --control-height-compact: 2.75rem;
  --touch-target: 3rem;
  --control-padding-block: .875rem;
  --control-padding-inline: 1.125rem;
  --control-padding-compact-block: .625rem;
  --control-padding-compact-inline: var(--space-4);
  --focus-width: 2px;
  --focus-offset: 3px;
  --focus-inset: -2px;
}
/* Semantic theme colors, shared by all site components. */
:root {
  --paper:#f7f7f5;
  --surface:#ffffff;
  --ink:#222222;
  --muted:#646464;
  --line:rgb(24 24 24 / 16%);
  --accent:#345dc4;
  --accent-hover:#254ba8;
  --on-accent:#ffffff;
  --gutter:1.5rem;
  --column-gap:3rem;
  --section-tint:#efefed;
  --code-surface:#ececea;
  --menu-surface:#ffffff;
  --menu-hover:#efefed;
  --control-surface:#f7f7f5;
  --control-text:#353535;
  --preview-stage:#e8e8e5;
  --preview-paper:#f3f5f8;
  --preview-ink:#213146;
  --preview-label:#595959;
  --preview-grid:57 111 124;
  --shadow-popover:0 .5rem 1.5rem rgb(0 0 0 / 10%);
  color-scheme:light;
}
@media(prefers-color-scheme:dark){:root:not([data-appearance=light]){--paper:#171717;--surface:#202020;--ink:#f2f2f0;--muted:#b8b8b5;--line:rgb(245 245 245 / 17%);--accent:#a9c1ff;--accent-hover:#ccdaff;--on-accent:#171717;--section-tint:#1b1b1b;--code-surface:#111111;--menu-surface:#242424;--menu-hover:#303030;--control-surface:#181818;--control-text:#ddddda;--preview-stage:#292929;--preview-label:#c7c7c3;--shadow-popover:none;color-scheme:dark}}
:root[data-appearance=dark] {
  --paper:#171717;
  --surface:#202020;
  --ink:#f2f2f0;
  --muted:#b8b8b5;
  --line:rgb(245 245 245 / 17%);
  --accent:#a9c1ff;
  --accent-hover:#ccdaff;
  --on-accent:#171717;
  --section-tint:#1b1b1b;
  --code-surface:#111111;
  --menu-surface:#242424;
  --menu-hover:#303030;
  --control-surface:#181818;
  --control-text:#ddddda;
  --preview-stage:#292929;
  --preview-label:#c7c7c3;
  --shadow-popover:none;
  color-scheme:dark;
}

@media(min-width:40rem){:root{--gutter:2.5rem}}
@media(min-width:64rem){:root{--gutter:3.5rem}}
@media(max-width:25rem){:root{--gutter:1rem}}
@media(pointer:coarse){:root{--control-height-compact:var(--touch-target)}}