/* "Modern Civic" — dark + light theme refresh (design handoff, 2026-07).
   Light values live under :root; dark values override the same variable
   names under .dark, matching tailwind.css's `@custom-variant dark
   (&:where(.dark, .dark *))` mechanism exactly — no change to the existing
   .dark-class toggle script is required. */
:root {
  /* Legacy brand-ramp families (primary/dprimary/selected/secondary/accent/
     neutral) — kept so files not explicitly retouched by this refresh
     (forms, alerts, meeting-transcript, post-toc, about.html, surgeries.html)
     still resolve to Modern-Civic-consistent colors. These are flat,
     mode-invariant values (no .dark override), matching how every other
     theme file in src/styles/themes/ already works — light/dark appearance
     comes from which utility (`text-primary-dark` vs `dark:text-selected`)
     a template applies, not from the variable itself changing. */
  --color-primary-light:  200 230 214; /* pale mint tint */
  --color-primary:         30 122  82; /* mid green */
  --color-primary-sdark:   21  90  61;
  --color-primary-dark:    15 107  69; /* light-theme --gr, used as light-mode text/accent */

  --color-dprimary-light:  27  38  32; /* dark-theme --sf2 */
  --color-dprimary:        20  29  25; /* dark-theme --sf */
  --color-dprimary-dark:   12  18  16; /* dark-theme --bg */

  --color-selected-light: 246 224 168; /* pale gold tint */
  --color-selected:       232 185  49; /* dark-theme --gold */
  --color-selected-dark:  199 156  20; /* light-theme --fill, deeper gold-brown */

  --color-secondary-light: 200 230 214;
  --color-secondary:        30 122  82;
  --color-secondary-dark:   21  90  61;

  --color-accent-light: 246 224 168;
  --color-accent:       232 185  49;
  --color-accent-dark:  199 156  20;

  --color-neutral-light:  243 244 238; /* light-theme --sf2 */
  --color-neutral-subtle: 241 243 236; /* light-theme --bg2 */
  --color-neutral:        126 139 132; /* light-theme --fnt */
  --color-neutral-dark:    65  88  74; /* light-theme --hxm */

  /* Modern Civic semantic tokens — light theme */
  --color-bg:         251 251 248;
  --color-bg2:         241 243 236;
  --color-sf:          255 255 255;
  --color-sf2:         243 244 238;
  --color-tx:           16  24  21;
  --color-mut:          74  88  79;
  --color-fnt:         126 139 132;
  --color-gr:           15 107  69;
  --color-grtx:         15 107  69;
  --color-gold:        237 192  51;
  --color-goldink:      28  21   3;
  --color-hg1:         243 245 238;
  --color-hg2:         168 202 178;
  --color-hx:           15  35  26;
  --color-hxm:          65  88  74;
  --color-bandbg:       15  58  40;
  --color-bandtx:      236 245 238;
  --color-bandbtn:     237 192  51;
  --color-bandbtntx:    28  21   3;
  --color-fill:        199 156  20;
  --color-fill2:        15 107  69;

  --bd:      rgba(16,24,21,.12);
  --grsoft:  rgba(15,107,69,.09);
  --track:   rgba(16,24,21,.1);

  --rad: 6px;
}

.dark {
  --color-bg:          12  18  16;
  --color-bg2:         16  24  21;
  --color-sf:          20  29  25;
  --color-sf2:         27  38  32;
  --color-tx:         242 244 240;
  --color-mut:        159 176 165;
  --color-fnt:        107 124 113;
  --color-gr:          30 122  82;
  --color-grtx:        99 211 156;
  --color-gold:       232 185  49;
  --color-goldink:     28  21   3;
  --color-hg1:         12  18  16;
  --color-hg2:         22  74  52;
  --color-hx:         255 255 255;
  --color-hxm:        185 201 190;
  --color-bandbg:      15  46  33;
  --color-bandtx:     230 242 234;
  --color-bandbtn:    232 185  49;
  --color-bandbtntx:   28  21   3;
  --color-fill:       232 185  49;
  --color-fill2:       99 211 156;

  --bd:      rgba(255,255,255,.08);
  --grsoft:  rgba(64,190,130,.14);
  --track:   rgba(255,255,255,.09);
}

/* Hero background — plain diagonal gradient, replacing the old multi-stop
   radial mesh + frosted-blur technique. Single rule: --hg1/--hg2 already
   vary between light/dark via the token blocks above. A fine dot-grain
   texture (drawn from --tx, so it's dark flecks in light mode and light
   flecks in dark mode — no new colors) sits under the gradient for subtle
   depth. Both layers drift together, gently keeping the hero alive. */
.hero-mesh-gradient {
  background-image:
    radial-gradient(rgb(var(--color-tx) / 0.07) 1px, transparent 1.5px),
    linear-gradient(135deg, rgb(var(--color-hg1)) 20%, rgb(var(--color-hg2)));
  background-size: 26px 26px, 200% 200%;
  background-position: 0 0, 0% 50%;
  animation: hero-bg-drift 20s ease-in-out infinite;
}

@keyframes hero-bg-drift {
  0%   { background-position: 0 0, 0% 50%; }
  50%  { background-position: 52px 52px, 100% 50%; }
  100% { background-position: 0 0, 0% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-mesh-gradient {
    animation: none;
  }
}

/* Ticker + surgery band — single rule, --gold/--goldink already vary by theme. */
.header-event-banner,
.upcoming-event-banner {
  background-color: rgb(var(--color-gold)) !important;
  border-bottom-color: rgb(var(--color-gold)) !important;
}
.header-event-banner > div:first-child p {
  color: rgb(var(--color-goldink)) !important;
}
.header-event-banner > div:nth-child(2) button {
  color: rgb(var(--color-goldink)) !important;
}