/* Unsubbed design tokens. Every value in main.css references these. */
:root {
  /* color: dark is the default brand look */
  --c-bg: #0c0f12;
  --c-surface: #151a1e;
  --c-surface-2: #1b2126;
  --c-ink: #f4efe6;
  --c-muted: #aab3b0;
  --c-line: #262d31;
  --c-brand: #ff8a3d;        /* orange slash */
  --c-brand-ink: #15191a;    /* text on orange */
  --c-clarity: #0f9d76;
  --c-listen: #f0532d;
  --c-script: #6d3bf5;
  --c-focus: #ffb37f;
  color-scheme: dark;

  /* type: system stack only, no web fonts */
  --f-ui: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-0: clamp(0.82rem, 0.8rem + 0.1vw, 0.88rem);
  --fs-1: clamp(1rem, 0.97rem + 0.15vw, 1.06rem);
  --fs-2: clamp(1.12rem, 1.05rem + 0.35vw, 1.3rem);
  --fs-3: clamp(1.35rem, 1.2rem + 0.8vw, 1.8rem);
  --fs-4: clamp(1.8rem, 1.4rem + 2vw, 2.6rem);
  --fs-5: clamp(2.5rem, 1.6rem + 4.6vw, 4.8rem);
  --lh-tight: 1.04;
  --lh-body: 1.6;

  /* spacing */
  --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem;
  --s-6: 2rem; --s-7: 3rem; --s-8: 4.5rem; --s-9: 6rem;

  /* shape */
  --r-sm: 10px; --r-md: 16px; --r-lg: 22px; --r-pill: 999px;
  --shadow: 0 1px 2px rgb(0 0 0 / .3), 0 18px 40px -16px rgb(0 0 0 / .55);

  /* layout */
  --w-max: 1120px;
  --w-text: 680px;
  --gutter: 16px;
  --tap: 44px;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --c-bg: #fbfaf7; --c-surface: #ffffff; --c-surface-2: #f3f1ec; --c-ink: #15191a;
    --c-muted: #555f5d; --c-line: #e3dfd8; --c-focus: #b4501a; color-scheme: light;
  }
}