/* ---- theme default ---- */
/*
 * Default theme. These :root tokens are what every theme inherits; a theme overrides only what
 * it changes under html[data-theme="<id>"] (docs/THEMING.md). Three axes:
 *   html.light / html.dark / neither (= follow the OS)   → mode
 *   html[data-theme]                                      → theme (this file's id is "default")
 *   html[data-accent]                                     → accent palette within the theme
 * Dark values are written twice on purpose: once for the explicit .dark class, once for the OS
 * preference with no class set, so no JavaScript runs before first paint.
 */
:root {
  --bg: oklch(0.985 0.003 90);
  --surface: oklch(1 0 0);
  --surface-2: oklch(0.965 0.005 90);
  --text: oklch(0.22 0.01 60);
  --muted: oklch(0.5 0.015 60);
  --border: oklch(0.9 0.006 80);
  --accent: oklch(0.55 0.13 55);         /* brass */
  --accent-strong: oklch(0.47 0.14 55);
  --accent-soft: oklch(0.93 0.04 70);
  --on-accent: oklch(0.99 0 0);
  --danger: oklch(0.6 0.2 25);
  --success: oklch(0.6 0.15 150);
  --radius: 0.75rem;
  /* Fonts: the role tokens (--font-body, --font-heading, --font-ui, --font-post, --font-mono and
     their -size/-line-height/-weight/-letter-spacing companions) are generated by the server
     from theme.json "fonts.roles"; --font-sans stays as an alias of the body role. */
  --font-sans: var(--font-body);

  /* Header geometry, read by the shell. */
  --masthead-logo-h: 4.5rem;          /* desktop masthead: logo (left) height */
  --masthead-splash-h: 4.5rem;        /* desktop masthead: splash (right) height */
  --compact-logo-h: 2.25rem;          /* phone toolbar logo at the top of the page … */
  --compact-logo-h-scrolled: 1.5rem;  /* … and after scrolling */
  --toolbar-h: 3.5rem;
}

/* ---- dark ------------------------------------------------------------------------------------ */
.dark {
  --bg: oklch(0.17 0.008 60);
  --surface: oklch(0.22 0.008 60);
  --surface-2: oklch(0.26 0.008 60);
  --text: oklch(0.94 0.005 80);
  --muted: oklch(0.68 0.01 70);
  --border: oklch(0.32 0.008 60);
  --accent: oklch(0.75 0.12 70);
  --accent-strong: oklch(0.82 0.12 75);
  --accent-soft: oklch(0.3 0.04 65);
  --on-accent: oklch(0.18 0.02 60);
}
@media (prefers-color-scheme: dark) {
  html:not(.light) {
    --bg: oklch(0.17 0.008 60);
    --surface: oklch(0.22 0.008 60);
    --surface-2: oklch(0.26 0.008 60);
    --text: oklch(0.94 0.005 80);
    --muted: oklch(0.68 0.01 70);
    --border: oklch(0.32 0.008 60);
    --accent: oklch(0.75 0.12 70);
    --accent-strong: oklch(0.82 0.12 75);
    --accent-soft: oklch(0.3 0.04 65);
    --on-accent: oklch(0.18 0.02 60);
    color-scheme: dark;
  }
}

/* ---- accents --------------------------------------------------------------------------------- */
[data-accent="steel"]  { --accent: oklch(0.52 0.08 240); --accent-strong: oklch(0.44 0.09 240); --accent-soft: oklch(0.93 0.025 240); }
[data-accent="forest"] { --accent: oklch(0.5 0.1 150);   --accent-strong: oklch(0.42 0.11 150); --accent-soft: oklch(0.93 0.03 150); }
[data-accent="oxide"]  { --accent: oklch(0.52 0.16 30);  --accent-strong: oklch(0.45 0.17 30);  --accent-soft: oklch(0.93 0.04 35); }

.dark[data-accent="steel"]  { --accent: oklch(0.75 0.09 235); --accent-strong: oklch(0.82 0.09 235); --accent-soft: oklch(0.3 0.04 240); }
.dark[data-accent="forest"] { --accent: oklch(0.74 0.11 150); --accent-strong: oklch(0.8 0.11 150);  --accent-soft: oklch(0.3 0.04 150); }
.dark[data-accent="oxide"]  { --accent: oklch(0.72 0.14 35);  --accent-strong: oklch(0.8 0.13 40);   --accent-soft: oklch(0.3 0.05 30); }
@media (prefers-color-scheme: dark) {
  html:not(.light)[data-accent="steel"]  { --accent: oklch(0.75 0.09 235); --accent-strong: oklch(0.82 0.09 235); --accent-soft: oklch(0.3 0.04 240); }
  html:not(.light)[data-accent="forest"] { --accent: oklch(0.74 0.11 150); --accent-strong: oklch(0.8 0.11 150);  --accent-soft: oklch(0.3 0.04 150); }
  html:not(.light)[data-accent="oxide"]  { --accent: oklch(0.72 0.14 35);  --accent-strong: oklch(0.8 0.13 40);   --accent-soft: oklch(0.3 0.05 30); }
}
:root {
  --font-body: "Inter", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --font-body-size: 1rem;
  --font-body-line-height: 1.5;
  --font-heading: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-heading-weight: 600;
  --font-heading-letter-spacing: -0.01em;
  --font-ui: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-post: "Inter", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --font-post-size: 1rem;
  --font-post-line-height: 1.6;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-mono-size: 0.9em;
}
/* ---- theme mem ---- */
/* MEM theme: inherits every default token; only the differences live here. */
html[data-theme="mem"] {
  --masthead-logo-h: 5rem;
  --masthead-splash-h: 4.75rem;
}