/* ==========================================================================
   LIGHT THEME OVERRIDES
   Sorted by depth of light: light-1 = lightest ... light-5 = darkest.
   Same hues throughout across all five — only lightness/elevation changes.
   ========================================================================== */

/* ==========================================================================
    Theme 1 — lightest
   ========================================================================== */
[data-theme="light-1"] {
  --bg: #3c4460;
  --bg-deep: #333a54;
  --surface: #4a5372;
  --text: #f8f9fb;
  --divider: rgba(248, 249, 251, 0.22);

  --section: #3c609f;
  --section-glow: #4375cb;
}

[data-theme="light-1"] .site-header.is-scrolled {
  background: rgba(51, 58, 84, .88);
}
[data-theme="light-1"] .hero__scrim {
  background: linear-gradient(180deg, rgba(51,58,84,.72) 0%, rgba(51,58,84,.26) 34%, rgba(51,58,84,.62) 72%, var(--bg) 100%);
}
[data-theme="light-1"] .hero__scrim--page {
  background: linear-gradient(180deg, rgba(51,58,84,.76) 0%, rgba(51,58,84,.34) 45%, var(--bg) 100%);
}
[data-theme="light-1"] .hero__glow {
  background: radial-gradient(70% 55% at 12% 78%, rgba(67,117,203,.5) 0%, transparent 70%);
}
[data-theme="light-1"] .form-card {
  background: rgba(51, 58, 84, .68);
}
[data-theme="light-1"] .tile::after {
  background: linear-gradient(180deg, rgba(51,58,84,.05), rgba(51,58,84,.80));
}
[data-theme="light-1"] .shot figcaption {
  background: linear-gradient(180deg, transparent, rgba(51,58,84,.75));
}

/* ==========================================================================
    Theme 2
   ========================================================================== */
[data-theme="light-2"] {
  --bg: #313850;
  --bg-deep: #292f45;
  --surface: #3f4762;
  --text: #f6f7f9;
  --divider: rgba(246, 247, 249, 0.21);

  --section: #31558f;
  --section-glow: #386abb;
}

[data-theme="light-2"] .site-header.is-scrolled {
  background: rgba(41, 47, 69, .88);
}
[data-theme="light-2"] .hero__scrim {
  background: linear-gradient(180deg, rgba(41,47,69,.75) 0%, rgba(41,47,69,.28) 34%, rgba(41,47,69,.65) 72%, var(--bg) 100%);
}
[data-theme="light-2"] .hero__scrim--page {
  background: linear-gradient(180deg, rgba(41,47,69,.79) 0%, rgba(41,47,69,.36) 45%, var(--bg) 100%);
}
[data-theme="light-2"] .hero__glow {
  background: radial-gradient(70% 55% at 12% 78%, rgba(56,106,187,.5) 0%, transparent 70%);
}
[data-theme="light-2"] .form-card {
  background: rgba(41, 47, 69, .68);
}
[data-theme="light-2"] .tile::after {
  background: linear-gradient(180deg, rgba(41,47,69,.05), rgba(41,47,69,.83));
}
[data-theme="light-2"] .shot figcaption {
  background: linear-gradient(180deg, transparent, rgba(41,47,69,.78));
}

/* ==========================================================================
    Theme 3
   ========================================================================== */
[data-theme="light-3"] {
  --bg: #262c40;
  --bg-deep: #1f2436;
  --surface: #333a52;
  --text: #f3f4f7;
  --divider: rgba(243, 244, 247, 0.20);

  --section: #26497f;
  --section-glow: #2d5eab;
}

[data-theme="light-3"] .site-header.is-scrolled {
  background: rgba(31, 36, 54, .88);
}
[data-theme="light-3"] .hero__scrim {
  background: linear-gradient(180deg, rgba(31,36,54,.78) 0%, rgba(31,36,54,.30) 34%, rgba(31,36,54,.68) 72%, var(--bg) 100%);
}
[data-theme="light-3"] .hero__scrim--page {
  background: linear-gradient(180deg, rgba(31,36,54,.82) 0%, rgba(31,36,54,.38) 45%, var(--bg) 100%);
}
[data-theme="light-3"] .hero__glow {
  background: radial-gradient(70% 55% at 12% 78%, rgba(45,94,171,.5) 0%, transparent 70%);
}
[data-theme="light-3"] .form-card {
  background: rgba(31, 36, 54, .68);
}
[data-theme="light-3"] .tile::after {
  background: linear-gradient(180deg, rgba(31,36,54,.05), rgba(31,36,54,.85));
}
[data-theme="light-3"] .shot figcaption {
  background: linear-gradient(180deg, transparent, rgba(31,36,54,.80));
}

/* ==========================================================================
    Theme 4 — my actual recommendation (elevation-based, not an average):
    surface pushed further above bg/bg-deep so cards clearly pop, section
    kept richer/more saturated so it reads as a deliberate accent block,
    divider opacity pulled back since the ground is lighter here.
   ========================================================================== */
[data-theme="light-4"] {
  --bg: #242b3f;
  --bg-deep: #1b2131;
  --surface: #333c58;
  --text: #f4f5f8;
  --divider: rgba(244, 245, 248, 0.15);

  --section: #1f4079;
  --section-glow: #3465b8;
}

[data-theme="light-4"] .site-header.is-scrolled {
  background: rgba(27, 33, 49, .90);
}
[data-theme="light-4"] .hero__scrim {
  background: linear-gradient(180deg, rgba(27,33,49,.80) 0%, rgba(27,33,49,.30) 34%, rgba(27,33,49,.70) 72%, var(--bg) 100%);
}
[data-theme="light-4"] .hero__scrim--page {
  background: linear-gradient(180deg, rgba(27,33,49,.84) 0%, rgba(27,33,49,.38) 45%, var(--bg) 100%);
}
[data-theme="light-4"] .hero__glow {
  background: radial-gradient(70% 55% at 12% 78%, rgba(52,101,184,.5) 0%, transparent 70%);
}
[data-theme="light-4"] .form-card {
  background: rgba(27, 33, 49, .74);
}
[data-theme="light-4"] .tile::after {
  background: linear-gradient(180deg, rgba(27,33,49,.05), rgba(27,33,49,.87));
}
[data-theme="light-4"] .shot figcaption {
  background: linear-gradient(180deg, transparent, rgba(27,33,49,.82));
}

/* ==========================================================================
    Theme 5 — darkest (closest to the original dark palette)
   ========================================================================== */
[data-theme="light-5"] {
  --bg: #1a1e2d;
  --bg-deep: #151824;
  --surface: #232838;
  --text: #eef0f3;
  --divider: rgba(238, 240, 243, 0.18);
}

[data-theme="light-5"] .site-header.is-scrolled {
  background: rgba(26, 30, 45, .88);
}
[data-theme="light-5"] .hero__scrim {
  background: linear-gradient(180deg, rgba(21,24,36,.82) 0%, rgba(21,24,36,.35) 34%, rgba(21,24,36,.72) 72%, var(--bg) 100%);
}
[data-theme="light-5"] .hero__scrim--page {
  background: linear-gradient(180deg, rgba(21,24,36,.86) 0%, rgba(21,24,36,.45) 45%, var(--bg) 100%);
}
[data-theme="light-5"] .hero__glow {
  background: radial-gradient(70% 55% at 12% 78%, rgba(23,69,138,.5) 0%, transparent 70%);
}
[data-theme="light-5"] .form-card {
  background: rgba(21, 24, 36, .72);
}
[data-theme="light-5"] .tile::after {
  background: linear-gradient(180deg, rgba(21,24,36,.05), rgba(21,24,36,.9));
}
[data-theme="light-5"] .shot figcaption {
  background: linear-gradient(180deg, transparent, rgba(21,24,36,.85));
}