@font-face {
  font-family: "Bricolage Grotesque";
  src: url("assets/fonts/bricolage-grotesque.ttf") format("truetype");
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}
:root {
  color-scheme: light;
  --color-paper: oklch(98% 0 0);
  --color-surface: oklch(100% 0 0);
  --color-logo-surface: oklch(100% 0 0);
  --color-soft: oklch(95% .002 250);
  --color-stage: oklch(92% .036 45);
  --color-ink: oklch(25% .008 250);
  --color-muted: oklch(47% .008 250);
  --color-rule: oklch(85% .004 250);
  --color-accent: oklch(49% .17 28);
  --color-accent-hover: oklch(42% .16 28);
  --color-on-accent: oklch(100% 0 0);
  --color-focus: oklch(45% .17 255);
  --color-selection: oklch(88% .07 45);
  --color-code: oklch(24% .013 45);
  --color-code-ink: oklch(95% .01 80);
  --color-success: oklch(43% .1 155);
  --color-shadow: oklch(20% .016 45 / .16);
  --font-display: "Bricolage Grotesque", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Hiragino Kaku Gothic ProN", "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, monospace;
  --space-xs: .5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --text-display: clamp(3rem, 5.8vw, 5.25rem);
  --text-heading: clamp(2rem, 3.5vw, 3.25rem);
  --radius-control: 8px;
  --radius-surface: 16px;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur-short: 150ms;
  --shadow-product: 0 20px 44px var(--color-shadow);
}
html[data-theme="dark"] {
  color-scheme: dark;
  --color-paper: oklch(21% .004 250);
  --color-surface: oklch(25% .004 250);
  --color-soft: oklch(27% .004 250);
  --color-stage: oklch(32% .035 45);
  --color-ink: oklch(94% .004 250);
  --color-muted: oklch(75% .004 250);
  --color-rule: oklch(41% .004 250);
  --color-accent: oklch(75% .135 30);
  --color-accent-hover: oklch(83% .1 30);
  --color-on-accent: oklch(20% .02 30);
  --color-focus: oklch(80% .12 245);
  --color-selection: oklch(43% .08 35);
  --color-success: oklch(78% .12 155);
  --color-shadow: oklch(5% .01 45 / .35);
}