/* ziesel.network — design tokens. Bron: tokens.json */

:root {
  color-scheme: light;
  --paper: #F5F3F7;
  --paper-raised: #FFFFFF;
  --paper-sunk: #ECE8F0;
  --ink: #2B2230;
  --ink-muted: #665D70;
  --line: #D9D2E0;
  --line-strong: #8C8296;
  --violet: #5F45A6;
  --on-violet: #FFFFFF;
  --lilac: #BBA7E6;
  --lilac-wash: #E9E2F7;
  --fawn: #E9CDA6;
  --fawn-deep: #7E5530;
  --stamen: #F0B83C;
  --steppe: #4E6B3C;
  --rose: #A8394F;
  --focus: var(--violet);

  --font-display: "Caprasimo", "Cooper Black", Georgia, serif;
  --font-sans: "Atkinson Hyperlegible Next", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "Martian Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px;

  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 18px; --radius-pill: 999px;

  --shadow-offset: 3px 3px 0 0 #BBA7E6;
  --shadow-offset-fawn: 3px 3px 0 0 #E9CDA6;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #1D1820; --paper-raised: #28212C; --paper-sunk: #161218;
    --ink: #EFEAF3; --ink-muted: #A99FB3;
    --line: #3A3140; --line-strong: #7A6F84;
    --violet: #B9A6EC; --on-violet: #1D1820;
    --lilac-wash: #352B47; --fawn-deep: #DDBB8E;
    --steppe: #A8C48E; --rose: #EE90A2;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #1D1820; --paper-raised: #28212C; --paper-sunk: #161218;
  --ink: #EFEAF3; --ink-muted: #A99FB3;
  --line: #3A3140; --line-strong: #7A6F84;
  --violet: #B9A6EC; --on-violet: #1D1820;
  --lilac-wash: #352B47; --fawn-deep: #DDBB8E;
  --steppe: #A8C48E; --rose: #EE90A2;
}

/* Type scale */
.display-xl { font: 400 52px/58px var(--font-display); letter-spacing: -0.01em; text-wrap: balance; }
.display    { font: 400 38px/44px var(--font-display); letter-spacing: -0.005em; text-wrap: balance; }
.title      { font: 400 26px/32px var(--font-display); text-wrap: balance; }
.heading    { font: 700 20px/28px var(--font-sans); }
.body       { font: 400 16px/26px var(--font-sans); }
.body-sm    { font: 400 14px/22px var(--font-sans); }
.label      { font: 700 12px/16px var(--font-sans); letter-spacing: 0.06em; text-transform: uppercase; }
.mono       { font: 400 13px/22px var(--font-mono); font-variation-settings: "wdth" 87.5; font-variant-numeric: tabular-nums; }