/* Vote Better themes (2026-10-06). Two attributes on <html> pick the theme:
     data-palette = 1 | 2 | 3   (1: Kylan's original, 2: MWEG brand, 3: palette 2 with green and a warmer red)
     data-fonts   = original | new
   Since 2026-10-07 the site is fixed on palette 2 with the new fonts
   (index.html), and the demo controls that switched them are gone. Palettes
   1 and 3 are kept here, unused, in case the controls come back.
   Every color and font in style.css / alt.css is a role variable defined
   here, so a palette sets *jobs* (text, accent, surface...) rather than
   raw colors. Text/background pairs were checked for WCAG AA contrast
   (4.5:1 for body text): see the notes on palette 2 below. */

@font-face {
  font-family: "Homebody Club";
  src: url("../assets/fonts/HomebodyClub.otf") format("opentype");
  font-display: swap;
}
@font-face {
  font-family: "Justus Pro";
  src: url("../assets/fonts/JustusPro.woff") format("woff");
  font-weight: 300;
  font-display: swap;
}

/* ---------- palette 1: original (white, mint, sage, taupe, plum) ---------- */
:root,
html[data-palette="1"] {
  --c-bg: #FFFFFF;
  --c-text: #513D4D;
  --c-text-muted: #6d5568;
  --c-surface: #E9FAE3;
  --c-surface-2: #DEE8D5;
  --c-surface-3: #D5C7BC;
  --c-line: #DEE8D5;
  --c-line-strong: #D5C7BC;
  --c-accent: #513D4D;
  --c-accent-hover: #6d5568;
  --c-on-accent: #FFFFFF;
  --c-link: #513D4D;
  --c-kicker: #6d5568;
  --c-header-bg: #FFFFFF;
  --c-header-text: #513D4D;
  --c-header-muted: #6d5568;
  --c-header-rule: #DEE8D5;
  --c-flag-bg: #D5C7BC;
  --c-flag-text: #513D4D;
  --c-banner-bg: #513D4D;
  --c-banner-text: #FFFFFF;
  --c-banner-muted: #DEE8D5;
  --c-banner-btn-bg: #E9FAE3;
  --c-banner-btn-text: #513D4D;
  --c-banner-btn-hover: #FFFFFF;
  --c-hero-bg: #513D4D;
  --c-hero-text: #FFFFFF;
  --c-hero-kicker: #E9FAE3;
  --c-rule: #513D4D;
  --c-overlay: rgba(81, 61, 77, 0.55);
  --c-up-bg: #2f6b45;   --c-up-text: #FFFFFF;
  --c-down-bg: #9b2d43; --c-down-text: #FFFFFF;
  --c-mixed-bg: transparent; --c-mixed-text: #513D4D; --c-mixed-border: #513D4D;
  --c-p1-bg: #E9FAE3; --c-p1-text: #513D4D; --c-p1-edge: #513D4D;
  --c-p2-bg: #DEE8D5; --c-p2-text: #513D4D; --c-p2-edge: #513D4D;
  --c-p3-bg: #D5C7BC; --c-p3-text: #513D4D; --c-p3-edge: #513D4D;
  --c-p4-bg: #EDE4EA; --c-p4-text: #513D4D; --c-p4-edge: #513D4D;
  --c-logo-bg: #513D4D; --c-logo-text: #FFFFFF;
  --c-pop-bg: #513D4D; --c-pop-text: #FFFFFF; --c-pop-edge: #E9FAE3;
  --c-row-alt: #E9FAE3; --c-row-hover: #DEE8D5;
  --c-info-bg: #E9FAE3; --c-info-edge: #513D4D;
}

/* ---------- palette 2: MWEG brand (the live palette) ----------
   Sapphire Sky #1c75db, Sky Surge #00bded, Onyx #101010, Laser Blue #1b57c1,
   White Smoke #f2f2f2, White, and yellow #FFC72C. Kylan, 2026-10-07: no more
   red; Amaranth (#e53c59) is replaced by yellow everywhere. Yellow carries
   Onyx text (12.2:1) and is never text on white (1.6:1). Contrast notes: Sky
   Surge text on white is 2.2:1, so it is used as text only on Onyx (hero,
   header) and as rules/accents elsewhere; links use Laser Blue, which passes
   on White, White Smoke and the light-blue row tint (Sapphire on White Smoke
   is 4.1:1). Muted text and hairlines are tints of Onyx. The question
   explanations (pop-ups) are all one style: white on Laser Blue (6.6:1) with
   a yellow edge. Alternate ballot rows use a light tint of Sapphire Sky. */
html[data-palette="2"] {
  --c-bg: #FFFFFF;
  --c-text: #101010;
  --c-text-muted: #444444;
  --c-surface: #f2f2f2;
  --c-surface-2: #e8e8e8;
  --c-surface-3: #dcdcdc;
  --c-line: #e3e3e3;
  --c-line-strong: #c4c4c4;
  --c-accent: #1c75db;
  --c-accent-hover: #1b57c1;
  --c-on-accent: #FFFFFF;
  --c-link: #1b57c1;
  --c-kicker: #1b57c1;
  --c-header-bg: #101010;
  --c-header-text: #FFFFFF;
  --c-header-muted: #f2f2f2;
  --c-header-rule: #FFC72C;
  --c-flag-bg: #101010;
  --c-flag-text: #FFFFFF;
  --c-banner-bg: #101010;
  --c-banner-text: #FFFFFF;
  --c-banner-muted: #f2f2f2;
  --c-banner-btn-bg: #00bded;
  --c-banner-btn-text: #101010;
  --c-banner-btn-hover: #FFFFFF;
  --c-hero-bg: #101010;
  --c-hero-text: #FFFFFF;
  --c-hero-kicker: #00bded;
  --c-rule: #FFC72C;
  --c-overlay: rgba(16, 16, 16, 0.6);
  --c-up-bg: #00bded;   --c-up-text: #101010;
  --c-down-bg: #FFC72C; --c-down-text: #101010;
  --c-mixed-bg: #FFFFFF; --c-mixed-text: #101010; --c-mixed-border: #101010;
  /* Kylan, 2026-10-08: all four question boxes share one background (the
     same light gray as the find-your-ballot cards, --c-surface) and dark
     text -- only the left edge accent still tells them apart, left to
     right: #e53c59, #00bded, #fed700, #1b57c1. */
  --c-p1-bg: #f2f2f2; --c-p1-text: #101010; --c-p1-edge: #e53c59;
  --c-p2-bg: #f2f2f2; --c-p2-text: #101010; --c-p2-edge: #00bded;
  --c-p3-bg: #f2f2f2; --c-p3-text: #101010; --c-p3-edge: #fed700;
  --c-p4-bg: #f2f2f2; --c-p4-text: #101010; --c-p4-edge: #1b57c1;
  --c-logo-bg: #FFC72C; --c-logo-text: #101010;
  /* Hover/explanation box (.q-pop) and the AZ map's hover-highlighted
     district share this same variable -- black now, not Laser Blue. */
  --c-pop-bg: #101010; --c-pop-text: #FFFFFF; --c-pop-edge: #FFC72C;
  --c-row-alt: #e8f1fb; --c-row-hover: #d3e4f8;
  --c-info-bg: #e8f1fb; --c-info-edge: #1b57c1;
}

/* ---------- palette 3: palette 2 with green for the dark blue, and a warmer red ----------
   Kylan, 2026-10-06: same as palette 2, but Laser Blue (#1b57c1) becomes green
   #22bf65 and Amaranth becomes #e84c50. Green text on white is only 2.4:1, so
   where palette 2 uses Laser Blue as text (links, kickers) or behind white
   text (button hover), this uses a darker shade of the same green, #15773f
   (5.6:1 on white, 5.0:1 on White Smoke). Green and the new red carry Onyx
   text (7.9:1 and 5.1:1). The first box's edge is Onyx like the others.

   Round 2, same day: pushed green into the remaining blue/cyan roles too
   (base --c-accent, hero kicker, banner button, "upholds" signal) so the
   brand color reads as green throughout, not just on hover/links. The base
   --c-accent now uses the darker #15773f (white text on it needs 4.5:1+;
   the brighter #22bf65 only clears 2.4:1 against white, same reason the
   original round used it for text), with a new, darker hover shade
   (#0f5c30) for visible feedback instead of repeating the same green on
   hover. --c-hero-kicker/--c-banner-btn-bg/--c-up-bg move to the brighter
   #22bf65, which is on a dark (Onyx) background or paired with Onyx text in
   all three spots (7.9:1, same pairing already used for p4).

   Round 3, same day: Kylan said blue was still showing up in too many
   places -- round 2 kept --c-p1-bg (Sapphire Sky) and --c-p3-bg (Sky Surge)
   blue on purpose, since those two are what tell the four principle boxes
   apart and p4 already owns green. With "remove all blue" as the explicit
   instruction, p1 and p3 move to two new, non-blue hues instead so the four
   boxes stay distinguishable: p1 -> amber #e8a33d (Onyx text, 8.8:1 -- too
   light for the white text the old blue used), p3 -> purple #9b59b6 (white
   text, 4.7:1 -- the reverse of p1, since this one's darker). Four boxes,
   four families now: red, amber, purple, green -- no blue anywhere in this
   palette. */
html[data-palette="3"] {
  --c-bg: #FFFFFF;
  --c-text: #101010;
  --c-text-muted: #444444;
  --c-surface: #f2f2f2;
  --c-surface-2: #e8e8e8;
  --c-surface-3: #dcdcdc;
  --c-line: #e3e3e3;
  --c-line-strong: #c4c4c4;
  --c-accent: #15773f;
  --c-accent-hover: #0f5c30;
  --c-on-accent: #FFFFFF;
  --c-link: #15773f;
  --c-kicker: #15773f;
  --c-header-bg: #101010;
  --c-header-text: #FFFFFF;
  --c-header-muted: #f2f2f2;
  --c-header-rule: #e84c50;
  --c-flag-bg: #101010;
  --c-flag-text: #FFFFFF;
  --c-banner-bg: #101010;
  --c-banner-text: #FFFFFF;
  --c-banner-muted: #f2f2f2;
  --c-banner-btn-bg: #22bf65;
  --c-banner-btn-text: #101010;
  --c-banner-btn-hover: #FFFFFF;
  --c-hero-bg: #101010;
  --c-hero-text: #FFFFFF;
  --c-hero-kicker: #22bf65;
  --c-rule: #e84c50;
  --c-overlay: rgba(16, 16, 16, 0.6);
  --c-up-bg: #22bf65;   --c-up-text: #101010;
  --c-down-bg: #e84c50; --c-down-text: #101010;
  --c-mixed-bg: #FFFFFF; --c-mixed-text: #101010; --c-mixed-border: #101010;
  --c-p1-bg: #e8a33d; --c-p1-text: #101010; --c-p1-edge: #101010;
  --c-p2-bg: #e84c50; --c-p2-text: #101010; --c-p2-edge: #101010;
  --c-p3-bg: #9b59b6; --c-p3-text: #FFFFFF; --c-p3-edge: #101010;
  --c-p4-bg: #22bf65; --c-p4-text: #101010; --c-p4-edge: #101010;
  --c-logo-bg: #e84c50; --c-logo-text: #101010;
  --c-pop-bg: #15773f; --c-pop-text: #FFFFFF; --c-pop-edge: #e8a33d;
  --c-row-alt: #eaf7ef; --c-row-hover: #d5efdf;
  --c-info-bg: #eaf7ef; --c-info-edge: #15773f;
}

/* ---------- fonts ---------- */
:root,
html[data-fonts="original"] {
  --f-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --f-body-weight: 400;
  --f-strong-weight: 700;
  --f-head: 'Archivo Black', 'Arial Black', Helvetica, sans-serif;
  --f-head-transform: none;
  --f-head-spacing: -0.01em;
  --f-size: 1rem;
}
/* MWEG brand: Homebody Club for headers, ALL CAPS only; Justus Pro Light for text. */
html[data-fonts="new"] {
  --f-body: "Justus Pro", Georgia, serif;
  --f-body-weight: 300;
  --f-strong-weight: 300;
  --f-head: "Homebody Club", "Arial Black", sans-serif;
  --f-head-transform: uppercase;
  --f-head-spacing: 0.02em;
  --f-size: 1.0625rem;
}