:root {
  --light-0: oklch(96.5% 0.011 87);
  --light-1: oklch(93% 0.013 85);
  --light-2: oklch(98.6% 0.005 87);
  --dark-0: oklch(15% 0.005 85);
  --dark-1: oklch(19% 0.006 85);
  --dark-2: oklch(24% 0.007 85);
  --ink: oklch(21% 0.006 85);
  --ink-muted: oklch(45% 0.012 80);
  --bone: oklch(95.3% 0.013 87);
  --bone-muted: oklch(73% 0.016 82);
  --brass: oklch(78% 0.075 82);
  --brass-hover: oklch(84% 0.06 84);
  --on-brass: oklch(17% 0.006 85);
  --brass-deep: oklch(47% 0.07 75);
  --border-int-light: oklch(57% 0.012 80);
  --border-int-dark:  oklch(56% 0.015 80);
  --hair-light: oklch(86% 0.012 85);
  --hair-dark:  oklch(31% 0.01 85);
  --surface-solid: rgb(21 20 17 / .94);
  --border-subtle: var(--hair-dark);
  --radius: 2px; --radius-sm: 0;
  --header-h: 64px;
  --gap-row: var(--space-8); --gap-col: var(--space-3);
}
@media (min-width: 900px) { :root { --header-h: 80px; } }
@supports not (color: oklch(0% 0 0)) {
  :root {
    --light-0: #f7f3eb; --light-1: #ece7de; --light-2: #fcfaf7;
    --dark-0: #0c0b09; --dark-1: #151411; --dark-2: #211f1c;
    --ink: #1a1815; --ink-muted: #59554e; --bone: #f3efe6; --bone-muted: #ada79d;
    --brass: #d0b380; --brass-hover: #ddc89e; --on-brass: #14120f; --brass-deep: #72552b;
    --border-int-light: #7b7770; --border-int-dark: #79746b; --hair-light: #d4d0c8; --hair-dark: #33302b;
  }
}