/**
 * Petaluma Civic — Theme System
 *
 * Three themes: dark-warm, dark-navy, light
 * Applied via data-theme on <html>. nav.js reads localStorage and sets it on load.
 *
 * Usage in HTML:
 *   <link rel="stylesheet" href="/static/theme.css">
 *   (add before the page's own <style> block)
 *
 * Unified variable schema:
 *   --bg              page background
 *   --bg-surface      card / panel surface
 *   --bg-lift         elevated / hover surface
 *   --text            primary text
 *   --text-mid        secondary text
 *   --text-dim        muted / placeholder text
 *   --border          standard border
 *   --gold            primary accent
 *   --gold-dim        muted accent
 *   --gold-tint       alpha tint (replaces --gold2)
 *   --gold-tint-subtle very subtle alpha tint (replaces --gold3)
 *   --red             destructive / no votes
 *   --green           positive / yes votes
 *   --blue            informational
 *   --nav-bg          nav background (with alpha, for backdrop-filter)
 *   --nav-bg-mobile   nav mobile dropdown background
 */

/* ── DEFAULT + DARK NAVY ──────────────────────────────────────────────────── */
/* dark-navy is the default (most pages). Applied when no data-theme is set
   or when data-theme="dark-navy". */
:root,
[data-theme="dark-navy"] {
  --bg:               #0f1923;
  --bg-surface:       #152030;
  --bg-lift:          #1c2b3c;
  --text:             #e8e6e0;
  --text-mid:         #b8b3aa;
  --text-dim:         #7e92aa;
  --border:           #253447;
  --gold:             #c8a84b;
  --gold-text:        #c8a84b;
  --gold-dim:         #8a6c28;
  --gold-tint:        rgba(200,168,75,0.12);
  --gold-tint-subtle: rgba(200,168,75,0.06);
  --red:              #da6242;
  --green:            #56936f;
  --blue:             #5b8fc0;
  --nav-bg:           rgba(15,25,35,0.97);
  --nav-bg-mobile:    rgba(15,25,35,0.98);
}

/* ── DARK WARM (brown/sepia) ──────────────────────────────────────────────── */
[data-theme="dark-warm"] {
  --bg:               #13120f;
  --bg-surface:       #1c1a16;
  --bg-lift:          #252219;
  --text:             #f0ede8;
  --text-mid:         #cec8bf;
  --text-dim:         #9b9187;
  --border:           #2e2b24;
  --gold:             #d4a847;
  --gold-text:        #d4a847;
  --gold-dim:         #8a6c28;
  --gold-tint:        rgba(212,168,71,0.12);
  --gold-tint-subtle: rgba(212,168,71,0.06);
  --red:              #d55d3d;
  --green:            #639922;
  --blue:             #5b8fc0;
  --nav-bg:           rgba(19,18,15,0.97);
  --nav-bg-mobile:    rgba(19,18,15,0.98);
}

/* ── LIGHT ────────────────────────────────────────────────────────────────── */
[data-theme="light"] {
  --bg:               #f6f4f0;
  --bg-surface:       #fdfcfa;
  --bg-lift:          #eceae4;
  --text:             #1a1814;
  --text-mid:         #4a4540;
  --text-dim:         #58554f;
  --border:           #d8d4cc;
  --gold:             #9a7228;
  --gold-text:        #7a5c20;
  --gold-dim:         #b89040;
  --gold-tint:        rgba(154,114,40,0.10);
  --gold-tint-subtle: rgba(154,114,40,0.05);
  --red:              #a82818;
  --green:            #2a5c3c;
  --blue:             #2a5880;
  --nav-bg:           rgba(246,244,240,0.97);
  --nav-bg-mobile:    rgba(246,244,240,0.98);
}

/* ── ACCESSIBILITY UTILITIES ──────────────────────────────────────────────── */

/* Screen-reader-only — hides visually, keeps in accessibility tree */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Skip link — invisible until focused, then slides in centered at top */
.skip-link {
  position: fixed; left: 50%; top: -100px;
  transform: translateX(-50%);
  padding: 8px 18px;
  background: #c8a84b; color: #13120f;
  font-size: 0.85rem; font-weight: 600;
  border-radius: 6px; text-decoration: none;
  z-index: 9999; transition: top 0.1s;
}
.skip-link:focus {
  top: 12px;
  outline: 2px solid var(--bg);
  outline-offset: 2px;
}

/* Global focus indicator — replaces browser default across all themes */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: 3px;
}
