/* ==========================================================================
   HydroJet Michigan LLC — color themes
   Two selectable palettes, both blue+green, one dark/moody one light/bright.
   Everything else in style.css references these tokens — swapping the
   [data-theme] attribute on <html> re-themes the entire site instantly.
   Temporary: client is choosing between the two, and between two mascots
   below. Once confirmed, both switchers come out and one option locks in.
   ========================================================================== */

:root,
html[data-theme="dark"] {
  --ink:        #0B2A4A;   /* deep navy — header/footer/hero */
  --ink-2:      #123A5E;
  --copper:     #1FA97A;   /* dark green — primary CTA (kept var name for compatibility) */
  --copper-dk:  #167A56;
  --aqua:       #159BD9;   /* blue — links/icons/secondary accent */
  --aqua-dk:    #0E6E9C;
  --paper:      #F3F7F6;
  --paper-2:    #E5F0EC;
  --paper-3:    #E9F2FA;   /* light blue tint — extra section variety */
  --text:       #10222B;
  --text-soft:  #4C5D62;
  --line:       #D7E2DE;
}

html[data-theme="light"] {
  --ink:        #1476B5;   /* bright mid blue — still dark enough for white text */
  --ink-2:      #1E8FD1;
  --copper:     #33B36B;   /* bright green — primary CTA */
  --copper-dk:  #279254;
  --aqua:       #29B6E8;   /* light blue accent */
  --aqua-dk:    #1C93BF;
  --paper:      #FFFFFF;
  --paper-2:    #EAF7F0;
  --paper-3:    #E7F4FC;   /* light blue tint — extra section variety */
  --text:       #123047;
  --text-soft:  #4A6478;
  --line:       #D8ECE3;
}

/* ---------- Theme switcher widget ---------- */
.theme-switch{ display:flex; align-items:center; gap:.5rem; }
.theme-switch span{ font-size:.75rem; color:inherit; opacity:.8; }
.theme-swatch{
  width:26px; height:26px; border-radius:50%; border:2px solid transparent;
  cursor:pointer; padding:0; position:relative; flex-shrink:0;
}
.theme-swatch[data-theme-option="dark"]{ background:linear-gradient(135deg,#0B2A4A 50%,#1FA97A 50%); }
.theme-swatch[data-theme-option="light"]{ background:linear-gradient(135deg,#1476B5 50%,#33B36B 50%); }
.theme-swatch.is-active{ border-color:currentColor; box-shadow:0 0 0 2px rgba(255,255,255,.5) inset; }

/* ---------- Mascot switcher widget ---------- */
.mascot-switch{ display:flex; align-items:center; gap:.5rem; }
.mascot-switch span{ font-size:.75rem; color:inherit; opacity:.8; }
.mascot-thumb{
  width:52px; height:52px; border-radius:50%; border:2px solid var(--line);
  cursor:pointer; padding:0; overflow:hidden; flex-shrink:0; background:var(--paper-2);
  transition:border-color .2s ease, transform .2s ease;
}
.mascot-thumb:hover{ transform:translateY(-2px); }
.mascot-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.mascot-thumb.is-active{ border-color:var(--copper); border-width:3px; background:#fff; }