/*
  Design tokens. One language for the whole site: one sans-serif family, hairlines, generous
  whitespace, a single violet accent used sparingly. Dark is the default; light follows the same scale.
  The theme is set on <html data-theme> before first paint (theme-init.js).

  No web font is loaded (like setka.dev): Inter when the visitor has it, otherwise the system UI font.
  No third-party request, nothing render-blocking, nothing to self-host.
*/

:root {
  --font-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* layout */
  --shell-max: 68rem;
  --gutter: 2.5rem;
  --measure: 36rem;
  --header-h: 4rem;
  --section-y: 7rem;

  /* type scale */
  --fs-body: 1.0625rem;   /* 17px */
  --fs-lede: 1.2rem;      /* 19.2px */
  --fs-small: 0.9rem;     /* 14.4px */
  --fs-xs: 0.8125rem;     /* 13px */
  --fs-h1: clamp(2.5rem, 1.5rem + 4vw, 4.75rem);
  --fs-title: clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem);
  --fs-h2: clamp(1.6rem, 1.25rem + 1.2vw, 2.25rem);
  --fs-h3: 1.125rem;

  --ease: 150ms ease;

  /* dark (default) */
  color-scheme: dark;
  --bg: #121016;
  --bg-hover: #1b1821;
  --ink: #f6f5f9;
  --ink-hover: #dedce6;
  --body: #c7c4d3;
  --muted: #9e9aaf;
  --rule: #2a2634;
  --underline: #545065;
  --control: #66617a;     /* field underlines: 3.2:1 on --bg (WCAG 1.4.11) */
  --accent: #b06fe6;
  --on-ink: #121016;
  /* Literal colour (no color-mix): browsers without color-mix() would drop it and leave the header see-through. */
  --header-bg: rgb(18 16 22 / 0.92);
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #ffffff;
  --bg-hover: #f6f5f9;
  --ink: #16131f;
  --ink-hover: #3e3a4d;
  --body: #3e3a4d;
  --muted: #726e83;
  --rule: #dedce6;
  --underline: #c7c4d3;
  --control: #8e8a9e;     /* 3.3:1 on white */
  --accent: #8438c6;
  --on-ink: #ffffff;
  --header-bg: rgb(255 255 255 / 0.92);
}

@media (max-width: 760px) {
  :root {
    --gutter: 1.25rem;
    --section-y: 4rem;
  }
}