/* Design tokens: the one place the site's colors are defined (DESIGN.md, "Color").
   Pages link this file before their own <style> and use the colors through var(--…); a color value written
   anywhere else is reported by `npm run verify` (rules in scripts/verify/design-rules.json).
   Dark is the default; the light theme applies when <html> has data-theme="light".
   Changing a value here changes it on every page that links this file. */

:root {
    /* Site theme (used by the nav, footer and page chrome). */
    --color-bg: #0a0a0a;
    --color-surface: #141414;
    --color-text: #f5f5f5;
    --color-text-muted: #888888;
    --color-accent: #ffffff;
    --color-border: #222222;

    /* Material 3 color roles (dark scheme). */
    --md-sys-color-secondary-container: #4A4458;
    --md-sys-color-on-secondary-container: #E8DEF8;
    --md-sys-color-surface-container: #211F26;
    --md-sys-color-on-surface-variant: #CAC4D0;
}

[data-theme="light"] {
    --color-bg: #f5f5f0;
    --color-surface: #ffffff;
    --color-text: #111111;
    --color-text-muted: #555555;
    --color-accent: #111111;
    --color-border: #e0e0e0;

    /* Material 3 color roles (light scheme). */
    --md-sys-color-secondary-container: #E8DEF8;
    --md-sys-color-on-secondary-container: #1D192B;
    --md-sys-color-surface-container: #F3EDF7;
    --md-sys-color-on-surface-variant: #49454F;
}