/* Tokens: colors, type, spacing. Design changes start here. See docs/DESIGN.md. Pages also link ../fonts/fonts.css. */

:root {
  color-scheme: light dark;

  --font-sans: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* spacing, 4px step */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;

  /* type */
  --fs-sm: 0.875rem;
  --fs-0: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
  --fs-1: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem);
  --fs-display: clamp(2.75rem, 1.4rem + 5.6vw, 5.5rem);
  --lh-body: 1.6;
  --measure: 65ch;

  /* motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast: 120ms;
  --t-mid: 240ms;

  /* shape */
  --r-s: 6px;
  --r-m: 10px;

  /* layout */
  --gutter: clamp(20px, 5vw, 48px);
  --container: 1440px;
}

/* light (default): pale lichen-grey, palette taken from the mascot */
:root {
  --bg: #EEEEE8;
  --surface: #F8F8F3;
  --ink: #1E1F19;
  --muted: #5F6155;
  --line: rgb(30 31 25 / 0.12);
  --line-strong: rgb(30 31 25 / 0.3);
  --accent: #C9A13B; /* hair mustard: fills and marks only, 2.1:1 on --bg, never text */
  --accent-ink: #7A5C0E; /* accent for text and focus, AA on --bg and --surface */
  --mold: #3B3D2F; /* dark olive, small details */
  --on-accent: #1E1F19;
}

/* dark: system preference unless the user chose explicitly */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #171812;
    --surface: #1F201A;
    --ink: #E9E8DF;
    --muted: #A2A393;
    --line: rgb(233 232 223 / 0.12);
    --line-strong: rgb(233 232 223 / 0.3);
    --accent: #D8B24A;
    --accent-ink: #E3C163;
    --mold: #A2A393;
    --on-accent: #171812;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #171812;
  --surface: #1F201A;
  --ink: #E9E8DF;
  --muted: #A2A393;
  --line: rgb(233 232 223 / 0.12);
  --line-strong: rgb(233 232 223 / 0.3);
  --accent: #D8B24A;
  --accent-ink: #E3C163;
  --mold: #A2A393;
  --on-accent: #171812;
}

:root[data-theme="light"] {
  color-scheme: light;
}