/*
================================================================================
  MARCO POLO EXPOSED — MASTER THEME SYSTEM
  Drop this entire block into the <style> of every page on the network.
  Pages: marcopolo.exposed | library.marcopolo.exposed | reader.html | articles
  ─────────────────────────────────────────────────────────────────────────────
  USAGE:
    Apply theme class to <html>: class="theme-dark"
    Switch via JS:               document.documentElement.className = 'theme-' + name;
    Persist:                     localStorage.setItem('mp-theme', name);
================================================================================
*/

/* ════════════════════════════════════════════════════════════════════════════
   :root — DEFAULT VALUES (Purple Revolution)
   All pages fall back to this. No hardcoded colors anywhere else.
   ════════════════════════════════════════════════════════════════════════════ */
:root {

  /* ── Page Structure ─────────────────────────────────────── */
  --bg:            #0d0b12;   /* body/page background */
  --bg-alt:        #110e18;   /* subtle alt (zebra rows, inset panels) */
  --surface:       #16121f;   /* topbar, sidebar, masthead, cards */
  --surface2:      #1e1829;   /* hover state, secondary surface */
  --overlay:       rgba(0,0,0,0.72); /* modal/mobile overlay */

  /* ── Borders ─────────────────────────────────────────────── */
  --border:        #2d2540;   /* default 1px borders */
  --border-hi:     #44385c;   /* elevated: section dividers, headings */
  --border-focus:  #8b5cf6;   /* input focus ring */

  /* ── Text ────────────────────────────────────────────────── */
  --text:          #e2dced;   /* primary body text */
  --text-hi:       #f5f0ff;   /* emphasized: h1, strong, stat values */
  --muted:         #8b82a0;   /* secondary: metadata, captions, nav */
  --faint:         #3a3050;   /* near-invisible: footer, decorative */

  /* ── Accent ─────────────────────────────────────────────── */
  --accent:        #a78bfa;   /* identity color: headings, active, links */
  --accent-dim:    #6d42c9;   /* active button bg, border on focus */
  --accent-bg:     #1a1030;   /* tinted bg behind accent elements */
  --accent-text:   #ffffff;   /* text ON colored accent buttons */

  /* ── Semantic Aliases ────────────────────────────────────── */
  --link:              var(--accent);
  --link-hover:        var(--text-hi);
  --input-bg:          var(--surface);
  --input-border:      var(--border-hi);
  --btn-bg:            var(--surface);
  --btn-border:        var(--border);
  --btn-text:          var(--muted);
  --btn-active-bg:     var(--accent-dim);
  --btn-active-border: var(--accent);
  --btn-active-text:   #ffffff;

  /* ── Format Badge Colors (CONSTANT — never override in themes) ── */
  --badge-pdf:     #b89a5a;
  --badge-mp4:     #6e8fc8;
  --badge-mp3:     #6ec88f;
  --badge-zip:     #c86e6e;
  --badge-csv:     #aaaaaa;

  /* ── Typography (CONSTANT) ────────────────────────────────── */
  --font-head: 'Georgia', 'Palatino Linotype', 'Book Antiqua', serif;
  --font-body: 'Courier New', 'Courier', monospace;
  --font-ui:   -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
}


/* ════════════════════════════════════════════════════════════════════════════
   THEME 1: Dark Breeze
   ════════════════════════════════════════════════════════════════════════════ */
html.theme-dark {
  --bg:            #0c0b09;
  --bg-alt:        #0f0e0c;
  --surface:       #131210;
  --surface2:      #1a1916;
  --overlay:       rgba(0,0,0,0.6);
  --border:        #2a2720;
  --border-hi:     #3d3a33;
  --border-focus:  #7a6535;
  --text:          #ddd8cc;
  --text-hi:       #f0ece3;
  --muted:         #7a7568;
  --faint:         #3a3830;
  --accent:        #b89a5a;
  --accent-dim:    #7a6535;
  --accent-bg:     #1e1a0f;
  --accent-text:   #ffffff;
  --link:          #b89a5a;
  --link-hover:    #d4b87a;
  --input-bg:      #131210;
  --input-border:  #3d3a33;
  --btn-bg:        #131210;
  --btn-border:    #2a2720;
  --btn-text:      #7a7568;
  --btn-active-bg:     #7a6535;
  --btn-active-border: #b89a5a;
  --btn-active-text:   #ffffff;
}


/* ════════════════════════════════════════════════════════════════════════════
   THEME 2: Purple Revolution
   Deep political dark. Rich amethyst accent. High drama.
   ════════════════════════════════════════════════════════════════════════════ */
html.theme-purple {
  --bg:            #0d0b12;
  --bg-alt:        #110e18;
  --surface:       #16121f;
  --surface2:      #1e1829;
  --overlay:       rgba(0,0,0,0.72);
  --border:        #2d2540;
  --border-hi:     #44385c;
  --border-focus:  #8b5cf6;
  --text:          #e2dced;
  --text-hi:       #f5f0ff;
  --muted:         #8b82a0;
  --faint:         #3a3050;
  --accent:        #a78bfa;
  --accent-dim:    #6d42c9;
  --accent-bg:     #1a1030;
  --accent-text:   #ffffff;
  --link:          #a78bfa;
  --link-hover:    #c4b5fd;
  --input-bg:      #16121f;
  --input-border:  #44385c;
  --btn-bg:        #16121f;
  --btn-border:    #2d2540;
  --btn-text:      #8b82a0;
  --btn-active-bg:     #6d42c9;
  --btn-active-border: #a78bfa;
  --btn-active-text:   #ffffff;
}


/* ════════════════════════════════════════════════════════════════════════════
   THEME 3: Light Charcoal
   Newspaper. Clean daylight. Dark charcoal ink on warm off-white.
   ════════════════════════════════════════════════════════════════════════════ */
html.theme-light {
  --bg:            #f2efe8;
  --bg-alt:        #e8e4dc;
  --surface:       #e4e0d8;
  --surface2:      #d8d4cc;
  --overlay:       rgba(0,0,0,0.4);
  --border:        #c4bfb4;
  --border-hi:     #a09890;
  --border-focus:  #4a3a18;
  --text:          #1e1c18;
  --text-hi:       #0a0908;
  --muted:         #5a5650;
  --faint:         #8a847a;
  --accent:        #4a3a18;
  --accent-dim:    #6a5428;
  --accent-bg:     #ddd5c0;
  --accent-text:   #f2efe8;
  --link:          #4a3a18;
  --link-hover:    #2a2010;
  --input-bg:      #f2efe8;
  --input-border:  #a09890;
  --btn-bg:        #e4e0d8;
  --btn-border:    #c4bfb4;
  --btn-text:      #5a5650;
  --btn-active-bg:     #4a3a18;
  --btn-active-border: #2a2010;
  --btn-active-text:   #f2efe8;
}

/* Light theme special cases — must NOT be overridden */
html.theme-light .entry-badge,
html.theme-light .si-badge {
  opacity: 1;   /* full saturation on cream background */
}

/* Light theme: if logo art is white/light, this prevents invisibility */
html.theme-light img.masthead-logo {
  filter: none;
}

/* Dark/purple/low: if logo art is very dark, add subtle bg circle */
html.theme-dark img.masthead-logo,
html.theme-purple img.masthead-logo,
html.theme-low img.masthead-logo {
  /* Uncomment if logo is dark-on-transparent and hard to see on dark bg:
  background: rgba(255,255,255,0.06);
  padding: 4px;
  */
}


/* ════════════════════════════════════════════════════════════════════════════
   THEME 4: Low Contrast
   Terminal amber. Midnight reading mode. Sepia warmth. Minimal eye strain.
   ════════════════════════════════════════════════════════════════════════════ */
html.theme-low {
  --bg:            #111009;
  --bg-alt:        #141309;
  --surface:       #18160c;
  --surface2:      #1f1d10;
  --overlay:       rgba(0,0,0,0.65);
  --border:        #252310;
  --border-hi:     #332f18;
  --border-focus:  #5a5020;
  --text:          #c8c090;
  --text-hi:       #ddd4a0;
  --muted:         #6a6440;
  --faint:         #302c14;
  --accent:        #8a7840;
  --accent-dim:    #5a5028;
  --accent-bg:     #1a1808;
  --accent-text:   #f0e8c0;
  --link:          #8a7840;
  --link-hover:    #a89450;
  --input-bg:      #18160c;
  --input-border:  #332f18;
  --btn-bg:        #18160c;
  --btn-border:    #252310;
  --btn-text:      #6a6440;
  --btn-active-bg:     #3a3418;
  --btn-active-border: #8a7840;
  --btn-active-text:   #ddd4a0;
}


/* ════════════════════════════════════════════════════════════════════════════
   UTILITY RULES — apply to all themes via variables
   Place these AFTER the theme blocks above.
   ════════════════════════════════════════════════════════════════════════════ */

/* Base element defaults using variables */
body {
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
}

a {
  color: var(--link);
  text-decoration: none;
}
a:hover {
  color: var(--link-hover);
  text-decoration: underline;
}
a:focus-visible {
  outline: 1px dashed var(--accent);
  outline-offset: 2px;
}

/* Scrollbar (Firefox) */
* {
  scrollbar-color: var(--border-hi) transparent;
  scrollbar-width: thin;
}

/* Shared input style */
input[type="search"],
input[type="text"],
select {
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  color: var(--text);
  font-family: var(--font-ui);
  outline: none;
}
input[type="search"]:focus,
input[type="text"]:focus,
select:focus {
  border-color: var(--border-focus);
}
input::placeholder {
  color: var(--faint);
}

/* Shared horizontal rule */
hr {
  border: none;
  border-top: 1px solid var(--border);
}

/* Theme picker widget */
.theme-picker {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-ui);
  font-size: 0.72rem;
  color: var(--muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.theme-picker select {
  background: var(--surface);
  border: 1px solid var(--border-hi);
  color: var(--text);
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  cursor: pointer;
}
.theme-picker select:focus {
  border-color: var(--border-focus);
}
.theme-picker select option {
  background: var(--surface);
  color: var(--text);
}

/* Format badges (library + reader) */
.entry-badge,
.si-badge {
  color: inherit;
  border: 1px solid currentColor;
  font-family: var(--font-ui);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.15rem 0.28rem;
  opacity: 0.75;
  flex-shrink: 0;
}
/* Full opacity in light theme (see above) */

/* Badge color classes */
.badge-pdf { color: var(--badge-pdf); }
.badge-mp4 { color: var(--badge-mp4); }
.badge-mp3 { color: var(--badge-mp3); }
.badge-zip { color: var(--badge-zip); }
.badge-csv { color: var(--badge-csv); }


/* ════════════════════════════════════════════════════════════════════════════
   END THEME SYSTEM
   ════════════════════════════════════════════════════════════════════════════ */
