/* ============================================================
   Jovian Design — site themes
   The skies of Jupiter: the default is the planet at twilight,
   and each switchable theme is a Galilean moon — Europa (ice
   light), Ganymede (aurora), Callisto (ember dark), plus hidden
   Io (volcanic) unlocked by an easter egg. Lore lives in the
   site's "Why Jupiter" section. Each block
   overrides ONLY semantic tokens; primitives in
   styleguide/tokens.css stay untouched. Every theme's pairings
   pass WCAG 2.2 AA (verified in scratch: 13 checks × 5 themes).
   NOTE: theme names/values are Claude's draft from the Well
   aesthetic — swap in the app's real theme specs when Ryan
   shares them (DECISIONS.md).
   The triangle logomark stays Io Orange (#EE7A33) in every
   theme — the mark does not re-color.
   ============================================================ */

/* Theme 1 — Jupiter (default): the planet itself at twilight; tokens.css values as-is.
   Theme ids follow the Galilean moons — the lore is on the site (Why Jupiter). */

/* Theme 2 — Callisto: the oldest, quietest moon; ember dark, candlelit. */
[data-jd-theme="callisto"] {
  --jd-bg: #201118;
  --jd-bg-deep: #160B10;
  --jd-surface: #2C1A21;
  --jd-surface-raised: #38242B;
  --jd-border: #533A42;
  --jd-border-subtle: #38242B;
  --jd-text: #F7EEE7;
  --jd-text-secondary: #DCC8BC;
  --jd-text-muted: #B99C90;
  --jd-heading: #F7EEE7;
  --jd-link: #E9B384;
  --jd-link-hover: #F2CBA6;
  --jd-accent: #E8C476;
  --jd-accent-bright: #F0D391;
  --jd-accent-deep: #D3A852;
  --jd-on-accent: #1C0F08;
  --jd-focus: #F2D9A0;
  --jd-kicker: #E8C476;
  --jd-fill-twilight: #6B4A38;
  --jd-gradient-veil: linear-gradient(180deg, #201118 0%, #2C1A21 55%, #38242B 100%);
  --jd-gradient-horizon: linear-gradient(180deg, #201118 0%, #3A2028 42%, #6B4038 68%, #A05A3E 85%, #D3A852 100%);
  --sky-glow: #E8C476;
}

/* Theme 3 — Ganymede: the only moon with its own magnetic field — it makes its own auroras. Verdant glow. */
[data-jd-theme="ganymede"] {
  --jd-bg: #101813;
  --jd-bg-deep: #0B110D;
  --jd-surface: #18231B;
  --jd-surface-raised: #223027;
  --jd-border: #3A4F41;
  --jd-border-subtle: #223027;
  --jd-text: #ECF3EC;
  --jd-text-secondary: #C6D6C6;
  --jd-text-muted: #97AC9B;
  --jd-heading: #ECF3EC;
  --jd-link: #A9CFA0;
  --jd-link-hover: #C4E2BB;
  --jd-accent: #AFC7A4;
  --jd-accent-bright: #C4D9BA;
  --jd-accent-deep: #8FAC83;
  --jd-on-accent: #0C130E;
  --jd-focus: #CDE4C4;
  --jd-kicker: #AFC7A4;
  --jd-fill-twilight: #38513E;
  --jd-gradient-veil: linear-gradient(180deg, #101813 0%, #18231B 55%, #223027 100%);
  --jd-gradient-horizon: linear-gradient(180deg, #101813 0%, #1D2C21 42%, #33503B 68%, #57755A 85%, #8FAC83 100%);
  --sky-glow: #AFC7A4;
}

/* Theme 4 — Europa: an ocean under ice; silver-blue moonlight. */
[data-jd-theme="europa"] {
  --jd-bg: #0F131D;
  --jd-bg-deep: #0A0E16;
  --jd-surface: #171E2C;
  --jd-surface-raised: #212A3C;
  --jd-border: #39445C;
  --jd-border-subtle: #212A3C;
  --jd-text: #EDF0F7;
  --jd-text-secondary: #C3CBDD;
  --jd-text-muted: #93A0BA;
  --jd-heading: #EDF0F7;
  --jd-link: #AFC3F0;
  --jd-link-hover: #C9D7F7;
  --jd-accent: #AFC3F0;
  --jd-accent-bright: #C9D7F7;
  --jd-accent-deep: #8FA6DB;
  --jd-on-accent: #0A0E16;
  --jd-focus: #D6E0F7;
  --jd-kicker: #AFC3F0;
  --jd-fill-twilight: #3A4A72;
  --jd-gradient-veil: linear-gradient(180deg, #0F131D 0%, #171E2C 55%, #212A3C 100%);
  --jd-gradient-horizon: linear-gradient(180deg, #0F131D 0%, #1B2436 42%, #35446B 68%, #5B6C99 85%, #8FA6DB 100%);
  --sky-glow: #D6E0F7;
}

/* Hidden theme — Io: volcanic, ember-lit. Unlocked by the
   sequence egg (see js/site.js); never listed in the picker
   until unlocked. */
[data-jd-theme="io"] {
  --jd-bg: #190D08;
  --jd-bg-deep: #110805;
  --jd-surface: #241310;
  --jd-surface-raised: #301A14;
  --jd-border: #543227;
  --jd-border-subtle: #301A14;
  --jd-text: #FBEFE6;
  --jd-text-secondary: #E3C9B8;
  --jd-text-muted: #BE9B87;
  --jd-heading: #FBEFE6;
  --jd-link: #F7A263;
  --jd-link-hover: #FBBE8E;
  --jd-accent: #EE7A33;
  --jd-accent-bright: #F58F49;
  --jd-accent-deep: #D96524;
  --jd-on-accent: #190D08;
  --jd-focus: #F7C59B;
  --jd-kicker: #F7A263;
  --jd-fill-twilight: #6E3A1E;
  --jd-gradient-veil: linear-gradient(180deg, #190D08 0%, #241310 55%, #301A14 100%);
  --jd-gradient-horizon: linear-gradient(180deg, #190D08 0%, #35180D 42%, #6E3A1E 68%, #A54F24 85%, #EE7A33 100%);
  --sky-glow: #F58F49;
}