/* ==========================================================================
   Alternative color themes: preview with ?theme=<name>
   (default = "night", defined in styles.css :root).
   Each block only overrides color tokens; layout is untouched.
   ========================================================================== */

/* ---- Daylight: bright white/cream, candy pink + grape accents ---- */
[data-theme="daylight"] {
  color-scheme: light;
  --bg: #fffdf8; --bg-2: #fff4e6; --surface: #ffffff; --surface-2: #f4effc;
  --line: rgba(40, 20, 80, 0.11); --header-bg: rgba(255, 253, 248, 0.86);
  --text: #1c1633; --muted: #57516e; --prose-text: #3a3450;
  --accent: #d6166b; --on-accent: #ffffff; --accent-hover: #1c1633; --on-accent-hover: #ffffff;
  --eyebrow: #c0135f; --link: #b8125b; --link-hover: #1c1633;
  --pop: #ffd60a; --on-pop: #1c1633; --chip-dot: #10b981;
  --grad-1: #e2530a; --grad-2: #d6166b; --grad-3: #7c3aed;
  --yellow: #f5b400; --pink: #ec4899; --green: #10b981; --blue: #2563eb; --red: #ef4444; --purple: #8b5cf6;
  --tile-alpha: 15%;
  --glow-1: rgba(255, 122, 168, 0.26); --glow-2: rgba(127, 213, 239, 0.38); --glow-3: rgba(255, 214, 10, 0.24);
  --icon-glow: rgba(90, 120, 200, 0.40); --cta-glow: rgba(255, 122, 168, 0.22);
  --shadow-color: rgba(60, 40, 100, 0.28);
}

/* ---- Pastel: matches the icon's lavender mountains + sky blue, soft pink ---- */
[data-theme="pastel"] {
  color-scheme: light;
  --bg: #f1eeff; --bg-2: #e6f5fc; --surface: #fcfbff; --surface-2: #ebe6fb;
  --line: rgba(80, 60, 160, 0.13); --header-bg: rgba(241, 238, 255, 0.86);
  --text: #2a2150; --muted: #5a5380; --prose-text: #3b3366;
  --accent: #6352c9; --on-accent: #ffffff; --accent-hover: #2a2150; --on-accent-hover: #ffffff;
  --eyebrow: #5b4bc4; --link: #5443bd; --link-hover: #2a2150;
  --pop: #ff9cbc; --on-pop: #2a2150; --chip-dot: #6ec9e8;
  --grad-1: #d94a86; --grad-2: #7d62d8; --grad-3: #2a86b0;
  --yellow: #f4c24a; --pink: #f38bb3; --green: #62c9a5; --blue: #72b3ee; --red: #f28b82; --purple: #a797ef;
  --tile-alpha: 32%;
  --glow-1: rgba(243, 139, 179, 0.38); --glow-2: rgba(127, 213, 239, 0.50); --glow-3: rgba(167, 151, 239, 0.40);
  --icon-glow: rgba(120, 110, 210, 0.45); --cta-glow: rgba(127, 213, 239, 0.45);
  /* "starlight" lavender aluminium watch cases */
  --case-1: #e4def5; --case-2: #a69ec8; --crown-1: #b3abd3; --crown-2: #ece8f9;
  --case-edge: rgba(255, 255, 255, 0.65); --shadow-color: rgba(90, 70, 160, 0.30);
}

/* ---- Arcade: deep space purple, neon cyan / magenta / lime ---- */
[data-theme="arcade"] {
  color-scheme: dark;
  --bg: #0a0118; --bg-2: #13042d; --surface: #170a36; --surface-2: #26124f;
  --line: rgba(0, 240, 255, 0.20); --header-bg: rgba(10, 1, 24, 0.82);
  --text: #f6f3ff; --muted: #bdb2e4; --prose-text: #ddd6f7;
  --heading-shadow: 0 0 22px rgba(255, 43, 214, 0.45);
  --accent: #00f0ff; --on-accent: #07001a; --accent-hover: #ff2bd6; --on-accent-hover: #07001a;
  --eyebrow: #00f0ff; --link: #00f0ff; --link-hover: #ff5ee0;
  --pop: #b6ff00; --on-pop: #0a0118; --chip-dot: #b6ff00;
  --grad-1: #00f0ff; --grad-2: #ff2bd6; --grad-3: #b6ff00;
  --yellow: #ffe600; --pink: #ff2bd6; --green: #39ff14; --blue: #00f0ff; --red: #ff3860; --purple: #b026ff;
  --tile-alpha: 24%;
  --glow-1: rgba(255, 43, 214, 0.36); --glow-2: rgba(0, 240, 255, 0.28); --glow-3: rgba(176, 38, 255, 0.24);
  --icon-glow: rgba(0, 240, 255, 0.65); --cta-glow: rgba(0, 240, 255, 0.26);
  --case-1: #2c2447; --case-2: #0c0618; --crown-1: #251d3d; --crown-2: #5a4b8a;
  --case-edge: rgba(0, 240, 255, 0.40); --shadow-color: rgba(0, 0, 0, 0.75);
}

/* ---- Sunny: warm butter yellow, tangerine + coral ---- */
[data-theme="sunny"] {
  color-scheme: light;
  --bg: #fff3d6; --bg-2: #ffe8b8; --surface: #fffaf0; --surface-2: #ffeccb;
  --line: rgba(120, 60, 0, 0.15); --header-bg: rgba(255, 243, 214, 0.88);
  --text: #3b1d0a; --muted: #6c4122; --prose-text: #4d2a12;
  --accent: #c2410c; --on-accent: #ffffff; --accent-hover: #3b1d0a; --on-accent-hover: #ffffff;
  --eyebrow: #b3390a; --link: #a93a08; --link-hover: #3b1d0a;
  --pop: #ff6f61; --on-pop: #2b0f05; --chip-dot: #f97316;
  --grad-1: #d9480f; --grad-2: #e03131; --grad-3: #c2255c;
  --yellow: #f5a300; --pink: #f0567a; --green: #3fae5a; --blue: #3b8fd9; --red: #e5383b; --purple: #9d5bd2;
  --tile-alpha: 20%;
  --glow-1: rgba(255, 183, 3, 0.42); --glow-2: rgba(255, 111, 97, 0.30); --glow-3: rgba(255, 214, 10, 0.34);
  --icon-glow: rgba(200, 90, 20, 0.40); --cta-glow: rgba(255, 150, 60, 0.35);
  --shadow-color: rgba(120, 60, 0, 0.30);
}

/* ---- Ocean: deep teal, mint + sky blue with a coral pop ---- */
[data-theme="ocean"] {
  color-scheme: dark;
  --bg: #03232b; --bg-2: #052f39; --surface: #083a45; --surface-2: #0d4956;
  --line: rgba(160, 255, 230, 0.13); --header-bg: rgba(3, 35, 43, 0.82);
  --text: #ecfffb; --muted: #a3d3cb; --prose-text: #cdeee8;
  --accent: #3ef0c0; --on-accent: #032027; --accent-hover: #ffffff; --on-accent-hover: #032027;
  --eyebrow: #3ef0c0; --link: #5ff5cf; --link-hover: #ffffff;
  --pop: #ff8a70; --on-pop: #2a0d05; --chip-dot: #3ef0c0;
  --grad-1: #3ef0c0; --grad-2: #5cc8ff; --grad-3: #ff8a70;
  --yellow: #ffd166; --pink: #ff8fab; --green: #3ef0c0; --blue: #5cc8ff; --red: #ff7b6b; --purple: #9d8cff;
  --tile-alpha: 20%;
  --glow-1: rgba(62, 240, 192, 0.20); --glow-2: rgba(92, 200, 255, 0.30); --glow-3: rgba(92, 200, 255, 0.14);
  --icon-glow: rgba(92, 200, 255, 0.55); --cta-glow: rgba(62, 240, 192, 0.22);
  --case-1: #2f4d55; --case-2: #0a1d22; --crown-1: #1e363c; --crown-2: #56787f;
  --case-edge: rgba(160, 255, 230, 0.14); --shadow-color: rgba(0, 10, 14, 0.7);
}