/* THEME */

:root {
  color-scheme: light;
  --ground: var(--white);
  --bg: #f8f8f9;
  --panel: #f1f1f2;
  --line: #dddddf;
  --fg: var(--black);
  --dim: #555558;
  --accent: var(--blue);
  --on-accent: var(--white);
  --plate: var(--white);
  --veil: color-mix(in oklab, var(--black) 20%, transparent);
}

/* TOKENS */

:root {
  --sans: "Noto Sans", -apple-system, system-ui, sans-serif, "Noto Color Emoji";
  --mono: "Noto Sans Mono", ui-monospace, monospace;
  --t-fine: 12px;
  --t-small: 14px;
  --t-body: 17px;
  --t-h3: 19px;
  --t-lead: 21px;
  --t-h2: clamp(28px, 4vw, 40px);
  --t-h1: clamp(38px, 6vw, 56px);
  --t-huge: clamp(72px, 16vw, 140px);
  --lh-body: 1.47;
  --lh-tight: 1.08;
  --track-tight: -0.02em;
  --track-wide: 0.02em;
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --s8: 64px;
  --s9: 96px;
  --r-card: 12px;
  --r-media: 18px;
  --r-pill: 980px;
  --header: 48px;
  --container: 1200px;
  --w-text: 980px;
  --w-prose: 680px;
  --gutter: clamp(20px, 4vw, 32px);
  --hair: 1px;
  --fast: 0.2s;
  --slow: 0.4s;
  --unfold: 0.55s;
  --ease: cubic-bezier(0.32, 0.08, 0.24, 1);
}

/* KIT */

:root {
  --site-line: var(--line);
  --site-hair: var(--hair) solid var(--line);
  --site-panel: var(--panel);
  --site-art: var(--plate);
  --site-fg: var(--fg);
  --site-dim: var(--dim);
  --site-accent: var(--accent);
  --site-mix: 45%;
  --site-mono: var(--mono);
  --site-read: var(--w-prose);
  --site-r2: var(--r-card);
  --site-s1: var(--s1);
  --site-s2: var(--s2);
  --site-s3: var(--s3);
  --site-s4: var(--s4);
  --site-s5: var(--s5);
  --site-s6: var(--s6);
  --site-icon: var(--t-h3);
}

/* DARK */

:root[data-mode="dark"] {
  color-scheme: dark;
  --ground: var(--black);
  --bg: #0b0b0c;
  --panel: #151517;
  --line: #2a2a2e;
  --fg: var(--white);
  --dim: #a3a3a8;
  --veil: color-mix(in oklab, var(--black) 55%, transparent);
}