@font-face { font-family: 'Bricolage Grotesque'; src: url("fonts/BricolageGrotesque.83fc903ea4fd.woff2") format('woff2'); font-style: normal; font-weight: 200 800; font-display: swap; }
@font-face { font-family: 'DM Sans'; src: url("fonts/DMSans.ea5a2acb6727.woff2") format('woff2'); font-style: normal; font-weight: 100 1000; font-display: swap; }
:root {
  --font-display: 'Bricolage Grotesque', ui-sans-serif, sans-serif;
  --font-body: 'DM Sans', ui-sans-serif, sans-serif;
  --color-paper: oklch(100% 0 0);
  --color-ink: oklch(26% .029 163);
  --color-muted: oklch(45% .023 164);
  --color-accent: oklch(35% .061 163);
  --color-on-accent: oklch(98% .012 85);
  --color-soft: oklch(93% .023 126);
  --color-field: oklch(100% 0 0);
  --color-control: oklch(60% .028 160);
  --color-rule: oklch(83% .023 105);
  --color-focus: oklch(49% .16 38);
  --color-error: oklch(43% .15 30);
  --color-highlight: oklch(57% .149 37);
  --color-clay-swatch: oklch(41% .117 35);
  --color-night-swatch: oklch(24% .032 257);
  --color-overlay: oklch(18% .02 160 / .5);
  --space-xs: .25rem; --space-sm: .5rem; --space-md: 1rem; --space-lg: 1.5rem;
  --space-xl: 2rem; --space-2xl: 3rem; --space-3xl: 4rem; --space-4xl: 6rem;
  --text-xs: .8125rem; --text-sm: .9375rem; --text-base: 1rem; --text-md: 1.125rem;
  --text-lg: 1.375rem; --text-xl: 1.75rem; --text-2xl: clamp(1.75rem, 2.8vw, 2.75rem);
  --text-display: clamp(3.5rem, 7.7vw, 7.4rem); --text-display-small: clamp(2.6rem, 6vw, 5.3rem);
  --text-editor: clamp(2.3rem, 4.8vw, 4.2rem);
  --radius-small: 4px; --radius-control: 6px; --radius-round: 50%;
  --ease-out: cubic-bezier(.16, 1, .3, 1); --ease-in: cubic-bezier(.7, 0, .84, 0);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1); --dur-short: 140ms;
}
[data-theme='clay'] {
  --color-paper: oklch(96% .028 68); --color-ink: oklch(29% .052 37); --color-muted: oklch(45% .044 43);
  --color-accent: oklch(41% .117 35); --color-soft: oklch(91% .042 67); --color-rule: oklch(80% .043 57);
  --color-field: oklch(98% .016 74); --color-control: oklch(61% .05 47); --color-highlight: oklch(48% .14 35);
}
[data-theme='night'] {
  --color-paper: oklch(24% .032 257); --color-ink: oklch(96% .018 85); --color-muted: oklch(80% .023 258);
  --color-accent: oklch(82% .107 82); --color-on-accent: oklch(24% .032 257); --color-soft: oklch(30% .035 257);
  --color-rule: oklch(43% .036 256); --color-field: oklch(29% .03 255); --color-control: oklch(68% .04 250);
  --color-highlight: oklch(82% .107 82); --color-focus: oklch(82% .107 82); --color-error: oklch(80% .09 30);
}