/* Accident Tracker themes. Each theme sets colour tokens; dark themes also get data-dark on <html>. */

/* ☀️ Sunny sky (default) */
:root, [data-theme="sky"] {
  --hero-1: #8fd3ff; --hero-2: #c7ecff; --hero-3: #e9f8ff; --hero-ink: #17395a;
}

/* 🌙 Night sky — deep navy with stars and a moon */
[data-theme="night"] {
  --sky-1: #050a1f; --sky-2: #0b1230; --sky-deep: #9ccfff; --ink: #e6eeff; --ink-soft: #95a6cc;
  --sun-soft: #2e2a1a; --cloud: #141c40; --cloud-edge: #222d5a; --rain-soft: #17204a;
  --card: #10183a; --card-2: #151e45; --line: #232e60;
  --shadow: 0 6px 0 rgba(0, 0, 0, .35), 0 14px 32px rgba(0, 0, 0, .45);
  --hero-1: #0a1440; --hero-2: #1a2766; --hero-3: #2b3a85; --hero-ink: #eaf1ff;
  color-scheme: dark;
}

/* 🌌 Midnight — true black for OLED screens and bedtime */
[data-theme="midnight"] {
  --sky-1: #000000; --sky-2: #03040a; --sky-deep: #8cc4ff; --ink: #eef2ff; --ink-soft: #8a93ad;
  --sun-soft: #221f12; --cloud: #0b0d16; --cloud-edge: #1a1e2c; --rain-soft: #0e1220;
  --card: #0a0c14; --card-2: #0f121c; --line: #1c2030;
  --shadow: 0 6px 0 rgba(0, 0, 0, .6), 0 14px 32px rgba(0, 0, 0, .7);
  --hero-1: #000000; --hero-2: #0a0f2a; --hero-3: #141c45; --hero-ink: #eef2ff;
  color-scheme: dark;
}

/* ⛈️ Stormy — moody grey-purple */
[data-theme="storm"] {
  --sky-1: #22263a; --sky-2: #2d3249; --sky-deep: #b3c8ff; --ink: #eef1fa; --ink-soft: #aab2c9;
  --sun-soft: #3b3622; --cloud: #353b54; --cloud-edge: #474e6b; --rain-soft: #343b58;
  --card: #333950; --card-2: #3b425c; --line: #4b5371;
  --shadow: 0 6px 0 rgba(0, 0, 0, .3), 0 14px 32px rgba(0, 0, 0, .35);
  --hero-1: #3a4060; --hero-2: #555c80; --hero-3: #727a9e; --hero-ink: #f2f4fb;
  color-scheme: dark;
}

/* 🌅 Sunset — warm peach and coral */
[data-theme="sunset"] {
  --sky-1: #ffc2a0; --sky-2: #fff0e4; --sky-deep: #c84e2a; --ink: #4a2a1c; --ink-soft: #8d6252;
  --line: #f6d6c3; --card-2: #fff7f1; --cloud-edge: #f6dccd; --rain-soft: #f4e6ee;
  --shadow: 0 6px 0 rgba(200, 78, 42, .10), 0 14px 32px rgba(200, 78, 42, .14);
  --hero-1: #ff8f6b; --hero-2: #ffbf8f; --hero-3: #ffe6c9; --hero-ink: #4a2416;
}

/* 🌈 Rainbow — soft pastel rainbow */
[data-theme="rainbow"] {
  --sky-1: #ffe3f0; --sky-2: #f5f2ff; --sky-deep: #7a4fd6; --ink: #35295a; --ink-soft: #776d97;
  --line: #e7dcf7; --card-2: #fbf9ff; --cloud-edge: #e9e0fa;
  --shadow: 0 6px 0 rgba(122, 79, 214, .10), 0 14px 32px rgba(122, 79, 214, .12);
  --hero-1: #ffc7dd; --hero-2: #d6e8ff; --hero-3: #e3ffe9; --hero-ink: #35295a;
}
[data-theme="rainbow"] body {
  background: linear-gradient(160deg, #ffd6e8 0%, #ffe9cc 20%, #fff7c7 38%, #dcf7dc 56%, #d6ecff 74%, #e6dcff 100%) fixed;
}

/* ❄️ Snow day — crisp icy whites */
[data-theme="snow"] {
  --sky-1: #e3ecf6; --sky-2: #fbfdff; --sky-deep: #3a6c9c; --ink: #20364d; --ink-soft: #62798f;
  --line: #e0e8f1; --card-2: #f6f9fc; --cloud-edge: #e3ebf3;
  --shadow: 0 6px 0 rgba(58, 108, 156, .08), 0 14px 32px rgba(58, 108, 156, .10);
  --hero-1: #cfe0f1; --hero-2: #eaf2fa; --hero-3: #ffffff; --hero-ink: #20364d;
}
[data-theme="snow"] body {
  background: radial-gradient(circle at 15% 20%, rgba(255,255,255,.9) 0 2px, transparent 3px) 0 0/60px 60px,
              radial-gradient(circle at 60% 70%, rgba(255,255,255,.8) 0 1.5px, transparent 2.5px) 0 0/90px 90px,
              linear-gradient(180deg, var(--sky-1), var(--sky-2)) fixed;
}

/* 🌿 Meadow — fresh greens */
[data-theme="meadow"] {
  --sky-1: #c6efc0; --sky-2: #f0fbea; --sky-deep: #2d8547; --ink: #1d3b27; --ink-soft: #5b7b64;
  --line: #d3ebcf; --card-2: #f6fdf3; --cloud-edge: #d8eed4;
  --shadow: 0 6px 0 rgba(45, 133, 71, .10), 0 14px 32px rgba(45, 133, 71, .12);
  --hero-1: #a7e3ff; --hero-2: #d9f4ff; --hero-3: #c8efb8; --hero-ink: #1d3b27;
}

/* 🌊 Ocean — calm teals */
[data-theme="ocean"] {
  --sky-1: #a3e4e6; --sky-2: #e8fbfb; --sky-deep: #157a8a; --ink: #143c43; --ink-soft: #527b82;
  --line: #cbeced; --card-2: #f3fdfd; --cloud-edge: #d2f0f0;
  --shadow: 0 6px 0 rgba(21, 122, 138, .10), 0 14px 32px rgba(21, 122, 138, .12);
  --hero-1: #7fd6e6; --hero-2: #bdeef2; --hero-3: #e6fbfb; --hero-ink: #10363d;
}

/* 💜 Lavender dream */
[data-theme="lavender"] {
  --sky-1: #d9ccff; --sky-2: #f6f2ff; --sky-deep: #6547c7; --ink: #31275a; --ink-soft: #716896;
  --line: #e3dbfa; --card-2: #fbf8ff; --cloud-edge: #e6defb;
  --shadow: 0 6px 0 rgba(101, 71, 199, .10), 0 14px 32px rgba(101, 71, 199, .12);
  --hero-1: #b9a6f5; --hero-2: #ddd2ff; --hero-3: #f3eeff; --hero-ink: #2c2252;
}

/* 🌸 Pastel pink */
[data-theme="pastel"] {
  --sky-1: #ffd9ec; --sky-2: #fff1f8; --sky-deep: #c2417f; --ink: #4a2a42; --ink-soft: #8a6680;
  --line: #f6d6e8; --card-2: #fff7fb; --cloud-edge: #f3d9e8;
  --shadow: 0 6px 0 rgba(194, 65, 127, .10), 0 14px 32px rgba(194, 65, 127, .12);
  --hero-1: #ffb8d8; --hero-2: #ffd9ec; --hero-3: #fff1f8; --hero-ink: #4a2042;
}

/* 🌓 Match my device: sunny by day, night sky when the device is in dark mode */
@media (prefers-color-scheme: dark) {
  [data-theme="auto"] {
    --sky-1: #050a1f; --sky-2: #0b1230; --sky-deep: #9ccfff; --ink: #e6eeff; --ink-soft: #95a6cc;
    --sun-soft: #2e2a1a; --cloud: #141c40; --cloud-edge: #222d5a; --rain-soft: #17204a;
    --card: #10183a; --card-2: #151e45; --line: #232e60;
    --shadow: 0 6px 0 rgba(0, 0, 0, .35), 0 14px 32px rgba(0, 0, 0, .45);
    --hero-1: #0a1440; --hero-2: #1a2766; --hero-3: #2b3a85; --hero-ink: #eaf1ff;
    color-scheme: dark;
  }
}

/* ---------- Shared dark-theme touches ---------- */
[data-dark] body {
  background:
    radial-gradient(circle at 12% 18%, rgba(255,255,255,.55) 0 1px, transparent 1.6px) 0 0/97px 97px,
    radial-gradient(circle at 63% 41%, rgba(255,255,255,.35) 0 1px, transparent 1.6px) 0 0/61px 61px,
    radial-gradient(circle at 38% 77%, rgba(200,220,255,.45) 0 1.2px, transparent 2px) 0 0/143px 143px,
    linear-gradient(180deg, var(--sky-1), var(--sky-2)) fixed;
}
[data-theme="midnight"] body { background: radial-gradient(circle at 30% 25%, rgba(255,255,255,.4) 0 1px, transparent 1.5px) 0 0/120px 120px, #000 fixed; }
/* The sun becomes a glowing moon */
[data-dark] .sky-hero .hero-sun {
  background: radial-gradient(circle at 38% 35%, #fffdf2, #f3eccb 55%, #d9d0a8);
  box-shadow: 0 0 0 18px rgba(243, 236, 203, .10), 0 0 0 40px rgba(243, 236, 203, .05), 0 0 60px rgba(243, 236, 203, .35);
  animation: none;
}
[data-dark] .sky-hero .hero-sun::after { content: ''; position: absolute; width: 26px; height: 26px; border-radius: 50%; background: rgba(170, 160, 120, .25); left: 46px; top: 72px; box-shadow: 40px -30px 0 -6px rgba(170,160,120,.2), 64px 20px 0 -9px rgba(170,160,120,.2); }
[data-dark] .sky-hero .hero-cloud { opacity: .35; filter: brightness(.7); }
[data-dark] .sky-hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 20% 30%, #fff 0 1px, transparent 1.6px) 0 0/70px 70px, radial-gradient(circle at 70% 60%, #fff 0 1px, transparent 1.6px) 0 0/53px 53px;
  opacity: .5;
}
[data-dark] .sky-hero.mood-rainy { background: linear-gradient(180deg, #1a2035 0%, #2a3150 75%, #39415f 100%); }
[data-dark] .sky-hero.mood-mixed, [data-dark] .sky-hero.mood-partly { background: linear-gradient(180deg, var(--hero-1) 0%, var(--hero-2) 80%, var(--hero-3) 100%); }
[data-dark] .sky-hero.mood-dawn { background: linear-gradient(180deg, #1b1d4a 0%, #3a2d63 55%, #6b4a7a 100%); }
[data-dark] .goal-bar { background: rgba(255,255,255,.15); }
[data-dark] .flash.ok { background: #12301f; border-color: #2f6b47; color: #bdf0d0; filter: none; }
[data-dark] .flash.warn { background: #33270e; border-color: #7a5a1e; color: #ffe2a6; filter: none; }
[data-dark] .flash.info { background: #11264a; border-color: #2f5390; color: #cfe3ff; filter: none; }
[data-dark] .flash.err { background: #3a1420; border-color: #7a2f45; color: #ffd0dc; filter: none; }
[data-dark] .announce.warn { background: #33270e; border-color: #7a5a1e; color: #ffe2a6; }
[data-dark] .announce.party { background: linear-gradient(90deg, #2c1838, #172a4d); border-color: #5b3a72; color: #f3dcff; }
[data-dark] .pill.ok { background: #12301f; border-color: #2f6b47; color: #bdf0d0; }
[data-dark] .pill.warn, [data-dark] .pill.sun { background: #33270e; border-color: #7a5a1e; color: #ffe2a6; }
[data-dark] .pill.bad { background: #3a1420; border-color: #7a2f45; color: #ffd0dc; }
[data-dark] .pill.rain { background: #18254a; border-color: #34477e; color: #c6d6ff; }
[data-dark] .pill.lilac { background: #261d48; border-color: #4a3a85; color: #dccfff; }
[data-dark] .qbtn.sunny { background: linear-gradient(180deg, #3a3116, #2c2512); border-color: #6b5520; color: #ffe08a; }
[data-dark] .qbtn.rainy { background: linear-gradient(180deg, #1c2a4f, #18213f); border-color: #34477e; color: #c6d6ff; }
[data-dark] .qbtn.dry { background: linear-gradient(180deg, #14301f, #10261a); border-color: #2f6b47; color: #bdf0d0; }
[data-dark] .qbtn.change { background: linear-gradient(180deg, #271e4a, #1f183b); border-color: #4a3a85; color: #dccfff; }
[data-dark] .qbtn { filter: none; }
[data-dark] .stat.sun { background: #2c2512; border-color: #6b5520; }
[data-dark] .tip { background: #2c2512; border-color: #6b5520; }
[data-dark] .bottomnav { box-shadow: 0 -8px 24px rgba(0,0,0,.4); }
[data-dark] .topbar { background: color-mix(in srgb, var(--sky-1) 85%, transparent); }
[data-dark] .badge.got { background: linear-gradient(180deg, var(--card), #2c2512); border-color: #6b5520; }
[data-dark] .kpi.alert { background: #3a1420; border-color: #7a2f45; }
[data-dark] .diaper-meter { background: linear-gradient(0deg, #2f5b9a var(--p), var(--card-2) var(--p)); }
[data-dark] .diaper-meter.messy { background: linear-gradient(0deg, #6b4f33 var(--p), var(--card-2) var(--p)); }

/* ---------- Theme picker ---------- */
.theme-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.theme-opt { position: relative; cursor: pointer; }
.theme-opt input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.theme-opt .sw { display: block; height: 64px; border-radius: 14px 14px 0 0; position: relative; overflow: hidden; }
.theme-opt .sw i { position: absolute; right: 10px; top: 10px; width: 22px; height: 22px; border-radius: 50%; }
.theme-opt .sw b { position: absolute; left: 10px; bottom: 8px; width: 46px; height: 14px; border-radius: 8px; }
.theme-opt .nm { display: block; padding: 8px 10px; font-weight: 800; font-size: .9rem; border-radius: 0 0 14px 14px; background: var(--card-2); }
.theme-opt .box { display: block; border: 3px solid var(--line); border-radius: 17px; transition: transform .1s; }
.theme-opt input:checked + .box { border-color: var(--sky-deep); transform: translateY(-2px); box-shadow: var(--shadow); }
.theme-opt input:focus-visible + .box { outline: 3px solid var(--sun); outline-offset: 2px; }