/* Blue theme color variables (based on color1.css) */
:root {
  /* Light mode palette (default) */
  --bg-dark: #203040; /* deep navy */
  --bg-light: #eaf4ff; /* very light blue */
  --nav-bg: #bcdff6; /* pale blue */
  --masthead-bg: #dff0ff; /* extra pale blue */
  --text-dark: #072033; /* near-black blue */
  --text-med: #1f4f7a; /* medium blue for links/text */
  --highlight: #cfe8ff; /* gentle highlight */
  --divider: #9fbad6; /* soft divider */

  /* Widget / component-specific colors */
  --mw-widget-bg: #ffffff;
  --mw-widget-color: #072033;
  --mw-desc-color: #5a7892;
  --mw-meta-color: #6f8fa6;
  --mw-error-color: #b00;
  --footer-hover-color: #e8f6ff;
  --footer-hover-bg: #2b6aa3;
  --h3-color: #1b6fff;
  --desc-hover: #0a2a3f;
  --photo-highlight-shadow: rgba(200, 230, 255, 0.85);
  --pulse-start: #e6f4ff;

  /* Shadow & overlay tokens (used by structural styles) */
  --overlay-hover: rgba(0, 20, 40, 0.06);
  --shadow-1: rgba(0, 20, 40, 0.04);
  --shadow-2: rgba(0, 20, 40, 0.08);
  --shadow-3: rgba(0, 20, 40, 0.12);
  --shadow-4: rgba(0, 20, 40, 0.18);

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

/* Dark mode palette */
:root {
  --bg-dark-mode: #071224;
  --bg-light-mode: #13202b;
  --nav-bg-dark: #0f2a3a;
  --masthead-bg-dark: #0e2533;
  --text-light-mode: #dbeffe;
  --text-med-dark: #9bb6c9;
  --highlight-dark: #2a5b7a;
  --divider-dark: #274a5e;

  /* 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 */
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);
  }
}