/*
  Theme contract: every template/component must only use the semantic
  custom properties defined here (--color-*, --radius, --shadow-*,
  --font-*). There are only two real color states, light and dark — see
  docs/design.md for the palette rationale and docs/development.md for how
  "auto" mode picks between them at runtime.
*/

:root {
  --radius: 6px;

  --font-heading: Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  --heading-weight: 600;
  --heading-tracking: -0.01em;
}

/* Light palette — the default (no [data-theme] attribute, or an explicit
   "light" choice). */
:root,
:root[data-theme="light"] {
  --color-bg: #f6f3ec;
  --color-surface: #ffffff;
  --color-surface-alt: #efe9dc;
  --color-text: #22291f;
  --color-text-muted: #5f6a57;
  --color-accent: #c1652b;
  --color-accent-strong: #954d1d;
  --color-accent-contrast: #ffffff;
  --color-border: #e2dac7;
  --color-border-strong: #c7bb9e;
  --shadow-card: 0 1px 2px rgba(40, 28, 12, 0.07), 0 1px 1px rgba(40, 28, 12, 0.04);
  --shadow-raised: 0 16px 40px rgba(40, 28, 12, 0.16);
}

/* Dark palette applied automatically when no explicit mode was stamped on
   <html> (e.g. JavaScript is disabled, so layout.mjs's pre-paint script
   never ran) and the OS prefers dark — a no-JS fallback for "auto" mode. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-bg: #14181a;
    --color-surface: #1d2320;
    --color-surface-alt: #232b27;
    --color-text: #ece8dd;
    --color-text-muted: #9aa394;
    --color-accent: #e08a4c;
    --color-accent-strong: #f2aa70;
    --color-accent-contrast: #1b140d;
    --color-border: #2b332e;
    --color-border-strong: #3c463f;
    --shadow-card: 0 0 0 1px var(--color-border);
    --shadow-raised: 0 0 0 1px rgba(224, 138, 76, 0.2), 0 20px 48px rgba(0, 0, 0, 0.5);
  }
}

/* Dark palette, explicit override — wins regardless of OS preference once
   layout.mjs's pre-paint script (or a manual toggle click) sets
   data-theme="dark". Same values as the media-query block above; the
   duplication is unavoidable since a media query and an attribute selector
   can't share one declaration block. */
:root[data-theme="dark"] {
  --color-bg: #14181a;
  --color-surface: #1d2320;
  --color-surface-alt: #232b27;
  --color-text: #ece8dd;
  --color-text-muted: #9aa394;
  --color-accent: #e08a4c;
  --color-accent-strong: #f2aa70;
  --color-accent-contrast: #1b140d;
  --color-border: #2b332e;
  --color-border-strong: #3c463f;
  --shadow-card: 0 0 0 1px var(--color-border);
  --shadow-raised: 0 0 0 1px rgba(224, 138, 76, 0.2), 0 20px 48px rgba(0, 0, 0, 0.5);
}