/* Colors and theme variables */
:root {
  /* Light mode palette (default) */
  --bg-dark: #555533;
  --bg-light: #f9f9e6;
  --nav-bg: #cccc99;
  --masthead-bg: #eeeecc;
  --text-dark: #333311;
  --text-med: #555522;
  --highlight: #ffeb99;
  --divider: #777755;

  /* Widget / component-specific colors */
  --mw-widget-bg: #ffffff;
  --mw-widget-color: #111111;
  --mw-desc-color: #555555;
  --mw-meta-color: #666666;
  --mw-error-color: #b00;
  --footer-hover-color: #eec;
  --footer-hover-bg: #664;
  --h3-color: #ff6b33;
  --desc-hover: #222200;
  --photo-highlight-shadow: rgba(255, 255, 200, 0.7);
  --pulse-start: #fff3b0;

  /* Shadow & overlay tokens (used by structural styles) */
  --overlay-hover: rgba(0, 0, 0, 0.1);
  --shadow-1: rgba(0, 0, 0, 0.08);
  --shadow-2: rgba(0, 0, 0, 0.15);
  --shadow-3: rgba(0, 0, 0, 0.25);
  --shadow-4: rgba(0, 0, 0, 0.3);

  /* Controls used in inline styles (fallbacks for older templates) */
  --ctrl-border: #cccccc;
  --ctrl-bg: #f8f8f8;
}

/* Dark mode palette */
:root {
  --bg-dark-mode: #1a1a1a;
  --bg-light-mode: #2d2d2d;
  --nav-bg-dark: #3a3a2f;
  --masthead-bg-dark: #2a2a1f;
  --text-light-mode: #e8e8d5;
  --text-med-dark: #b8b8a5;
  --highlight-dark: #6b6b3d;
  --divider-dark: #555544;

  /* dark widget overrides (used by dark-theme selectors) */
  --mw-widget-bg-dark: var(--bg-light-mode);
  --mw-widget-color-dark: var(--text-light-mode);
  --mw-error-dark: #ff6666;
}

/* Map variables when html[data-theme='dark'] is set; this improves runtime swapping */
html[data-theme='dark'] {
  --bg-dark: var(--bg-dark-mode);
  --bg-light: var(--bg-light-mode);
  --nav-bg: var(--nav-bg-dark);
  --masthead-bg: var(--masthead-bg-dark);
  --text-dark: var(--text-light-mode);
  --text-med: var(--text-med-dark);
  --highlight: var(--highlight-dark);
  --divider: var(--divider-dark);

  --mw-widget-bg: var(--mw-widget-bg-dark);
  --mw-widget-color: var(--mw-widget-color-dark);
  --mw-error-color: var(--mw-error-dark);
}

/* Auto-follow system dark mode preference when no user override */
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) {
    --bg-dark: var(--bg-dark-mode);
    --bg-light: var(--bg-light-mode);
    --nav-bg: var(--nav-bg-dark);
    --masthead-bg: var(--masthead-bg-dark);
    --text-dark: var(--text-light-mode);
    --text-med: var(--text-med-dark);
    --highlight: var(--highlight-dark);
    --divider: var(--divider-dark);

    --mw-widget-bg: var(--mw-widget-bg-dark);
    --mw-widget-color: var(--mw-widget-color-dark);
    --mw-error-color: var(--mw-error-dark);
  }
}