/*
  Design tokens: every colour the site uses, by role. style.css only references these
  (var(--color-*)), never raw hex values.

  How themes resolve
  - Default (no class on <html>): light values, switched to dark by the OS preference
    (prefers-color-scheme). This works with JavaScript off and before any script runs.
  - <html class="theme-light"> / <html class="theme-dark">: an explicit choice that beats the OS.
    A tiny inline script in <head> (see src/components.mjs) re-applies the visitor's saved
    choice before first paint, so there is no flash.

  Adding a theme
  1. Copy the `:root.theme-dark` block below, rename it `:root.theme-<name>`, and change the values.
     Every token must be present; `npm run check:contrast` fails if one is missing or if a
     pairing drops below WCAG AA.
  2. Add `<name>` to `themes` (and a label to `themeLabels`) in src/site.mjs so the toggle offers it.
  The OS-default block only applies while <html> has no theme-* class, so a new block needs no
  ordering care.
  See docs/theming.md.
*/

/* Light: the default, and the explicit `theme-light` choice. */
:root,
:root.theme-light {
  color-scheme: light;

  /* Surfaces */
  --color-surface: #fff;
  --color-surface-raised: #fff;
  --color-surface-subtle: #f3f6f8;
  --color-surface-highlight: #fbf7ed;
  --color-surface-notice: #fff8e4;
  --color-surface-header: rgba(255, 255, 255, .97);
  --color-surface-photo-frame: #f3bd37;

  /* Dark bands that stay dark in both themes: proof strip, footer, call-to-action */
  --color-band-bg: #082b68;
  --color-footer-bg: #061e49;
  --color-cta-bg: #b84a17;

  /* Text on surfaces */
  --color-text-primary: #18283e;
  --color-text-secondary: #536174;
  --color-text-prose: #334155;
  --color-text-heading: #082b68;
  --color-text-link: #1554bd;
  --color-text-accent: #b84a17;
  --color-text-success: #087a52;
  --color-text-error: #b3261e;
  --color-text-photo-frame: #082b68;

  /* Text on the dark bands and call-to-action */
  --color-text-on-inverse: #fff;
  --color-text-on-inverse-muted: #d5deeb;
  --color-text-on-inverse-soft: #e0e8f5;
  --color-text-on-inverse-accent: #f3cf6d;
  --color-text-on-cta: #fff;

  /* Buttons */
  --color-action-bg: #082b68;
  --color-action-bg-hover: #061e49;
  --color-action-text: #fff;
  --color-action-secondary-bg: #fff;
  --color-action-secondary-bg-hover: #fbf7ed;
  --color-action-secondary-text: #082b68;
  --color-action-secondary-border: #082b68;
  --color-action-inverse-bg: #fff;
  --color-action-inverse-bg-hover: #fbf7ed;
  --color-action-inverse-text: #082b68;
  --color-fab-bg: #087a52;
  --color-fab-bg-hover: #056541;
  --color-fab-text: #fff;
  --color-fab-border: #fff;

  /* Lines and focus */
  --color-border: #dce3eb;
  --color-border-control: #7c8aa0;
  --color-border-on-inverse: #ffffff40;
  --color-border-on-inverse-strong: #ffffff66;
  --color-focus-ring: #cf5420;
  --color-focus-ring-inverse: #fff;

  /* Decorative accents (stripes, rules, dots). Not needed to read or operate anything. */
  --color-accent: #e87542;
  --color-accent-secondary: #f3bd37;
  --color-accent-strong: #082b68;
  --color-heart: #f43f5e;

  /* Shadows */
  --color-shadow-sm: #081b3d26;
  --color-shadow-md: #081b3d33;
  --color-shadow-lg: #081b3d40;
}

/* Dark by OS preference, unless the visitor picked a theme explicitly. */
@media (prefers-color-scheme: dark) {
  :root:not([class*="theme-"]) {
    color-scheme: dark;

    --color-surface: #0c1422;
    --color-surface-raised: #152238;
    --color-surface-subtle: #101a2c;
    --color-surface-highlight: #162338;
    --color-surface-notice: #2a2415;
    --color-surface-header: rgba(12, 20, 34, .97);
    --color-surface-photo-frame: #f3bd37;

    --color-band-bg: #0f2d62;
    --color-footer-bg: #070d18;
    --color-cta-bg: #8f3c10;

    --color-text-primary: #e6ecf5;
    --color-text-secondary: #aebbd0;
    --color-text-prose: #cfd8e6;
    --color-text-heading: #f1f5fb;
    --color-text-link: #8fb4ff;
    --color-text-accent: #f4955f;
    --color-text-success: #4fd1a1;
    --color-text-error: #ff8f86;
    --color-text-photo-frame: #082b68;

    --color-text-on-inverse: #fff;
    --color-text-on-inverse-muted: #d5deeb;
    --color-text-on-inverse-soft: #e0e8f5;
    --color-text-on-inverse-accent: #f3cf6d;
    --color-text-on-cta: #fff;

    --color-action-bg: #2d6fe0;
    --color-action-bg-hover: #1f5bc8;
    --color-action-text: #fff;
    --color-action-secondary-bg: #152238;
    --color-action-secondary-bg-hover: #1d2f4d;
    --color-action-secondary-text: #c3d6ff;
    --color-action-secondary-border: #6f9bf0;
    --color-action-inverse-bg: #fff;
    --color-action-inverse-bg-hover: #fbf7ed;
    --color-action-inverse-text: #082b68;
    --color-fab-bg: #087a52;
    --color-fab-bg-hover: #056541;
    --color-fab-text: #fff;
    --color-fab-border: #fff;

    --color-border: #26364f;
    --color-border-control: #7a8ba6;
    --color-border-on-inverse: #ffffff40;
    --color-border-on-inverse-strong: #ffffff66;
    --color-focus-ring: #f4955f;
    --color-focus-ring-inverse: #fff;

    --color-accent: #e87542;
    --color-accent-secondary: #f3bd37;
    --color-accent-strong: #6f9bf0;
    --color-heart: #ff6b85;

    --color-shadow-sm: #00000066;
    --color-shadow-md: #00000080;
    --color-shadow-lg: #00000099;
  }
}

/* Dark: the explicit `theme-dark` choice. Keep identical to the block above. */
:root.theme-dark {
  color-scheme: dark;

  --color-surface: #0c1422;
  --color-surface-raised: #152238;
  --color-surface-subtle: #101a2c;
  --color-surface-highlight: #162338;
  --color-surface-notice: #2a2415;
  --color-surface-header: rgba(12, 20, 34, .97);
  --color-surface-photo-frame: #f3bd37;

  --color-band-bg: #0f2d62;
  --color-footer-bg: #070d18;
  --color-cta-bg: #8f3c10;

  --color-text-primary: #e6ecf5;
  --color-text-secondary: #aebbd0;
  --color-text-prose: #cfd8e6;
  --color-text-heading: #f1f5fb;
  --color-text-link: #8fb4ff;
  --color-text-accent: #f4955f;
  --color-text-success: #4fd1a1;
  --color-text-error: #ff8f86;
  --color-text-photo-frame: #082b68;

  --color-text-on-inverse: #fff;
  --color-text-on-inverse-muted: #d5deeb;
  --color-text-on-inverse-soft: #e0e8f5;
  --color-text-on-inverse-accent: #f3cf6d;
  --color-text-on-cta: #fff;

  --color-action-bg: #2d6fe0;
  --color-action-bg-hover: #1f5bc8;
  --color-action-text: #fff;
  --color-action-secondary-bg: #152238;
  --color-action-secondary-bg-hover: #1d2f4d;
  --color-action-secondary-text: #c3d6ff;
  --color-action-secondary-border: #6f9bf0;
  --color-action-inverse-bg: #fff;
  --color-action-inverse-bg-hover: #fbf7ed;
  --color-action-inverse-text: #082b68;
  --color-fab-bg: #087a52;
  --color-fab-bg-hover: #056541;
  --color-fab-text: #fff;
  --color-fab-border: #fff;

  --color-border: #26364f;
  --color-border-control: #7a8ba6;
  --color-border-on-inverse: #ffffff40;
  --color-border-on-inverse-strong: #ffffff66;
  --color-focus-ring: #f4955f;
  --color-focus-ring-inverse: #fff;

  --color-accent: #e87542;
  --color-accent-secondary: #f3bd37;
  --color-accent-strong: #6f9bf0;
  --color-heart: #ff6b85;

  --color-shadow-sm: #00000066;
  --color-shadow-md: #00000080;
  --color-shadow-lg: #00000099;
}