/* ==========================================================================
   ClearBreath — dark mode
   Activated by the "dark" class on <html> (set before first paint in <head>).
   Most components read the colour tokens, so the palette swap does the heavy
   lifting; the rules below tune the parts that need more than a token change.
   ========================================================================== */

html.dark {
  color-scheme: dark;
  --bg: 9 22 33;
  --mint: 13 31 45;
  --surface: 18 40 57;
  --ink: 233 244 241;
  --muted: 160 182 194;
  --line: 38 64 82;
  --brand: 52 205 176;
  --brand-2: 94 226 198;
  --on-brand: 5 30 28;
  --accent: 255 196 104;
  --deep: 6 16 25;
  --good: 88 222 164;
  --moderate: 255 204 112;
  --poor: 255 158 104;
  --bad: 255 128 128;
  --shadow: 0 10px 30px -12px rgb(0 0 0 / .6);
  --shadow-lg: 0 24px 50px -20px rgb(0 0 0 / .75);
}

/* Toggle icon swap */
html.dark .show-light { display: none; }
html.dark .show-dark { display: inline-block; }

/* Buttons: brand is bright in dark mode, so hover fills go light instead of navy */
html.dark .btn-primary::before { background: #fff; }
html.dark .btn-primary:hover { color: #0b2236; }
html.dark .btn-outline { border-color: rgb(var(--brand) / .6); }
html.dark .back-top:hover { background: #fff; color: #0b2236; }

/* Header, hero and banners */
html.dark .topbar { border-bottom: 1px solid rgb(var(--line)); }
html.dark .hero, html.dark .page-banner, html.dark .nf, html.dark .cs { background: linear-gradient(180deg, rgb(var(--mint)), rgb(var(--bg))); }
html.dark .blob { opacity: .28; }
html.dark .spin-badge > svg { background: rgb(var(--surface)); box-shadow: 0 0 0 1px rgb(var(--line)); }
html.dark .hslide::after { background: radial-gradient(ellipse at center, rgb(6 16 25 / .78), rgb(6 16 25 / .94)); }

/* Illustrations are bright; soften them a little on dark surfaces */
html.dark main img:not(.hslide-bg):not(.auth-img):not(.video-bg), html.dark .prop-card img { filter: brightness(.86) saturate(.95); }
html.dark .avatars img, html.dark .collage-sm, html.dark .about-small { border-color: rgb(var(--surface)); }

/* Dark bands need an edge so they separate from the page background */
html.dark .stats-band, html.dark .portal-band, html.dark .cta, html.dark .video-sec, html.dark .welcome, html.dark .pack-hot, html.dark .side-cta { box-shadow: inset 0 1px 0 rgb(var(--line)), inset 0 -1px 0 rgb(var(--line)); }
html.dark .pack-hot, html.dark .side-cta, html.dark .welcome { background: linear-gradient(140deg, rgb(13 52 60), rgb(8 26 40)); border-color: rgb(var(--line)); }
html.dark .site-footer { border-top: 1px solid rgb(var(--line)); }
html.dark .toast { background: rgb(var(--surface)); border-block: 1px solid rgb(var(--line)); border-inline-end: 1px solid rgb(var(--line)); color: rgb(var(--ink)); }
html.dark .modal { background: rgb(0 0 0 / .7); }

/* Forms */
html.dark .input { background-color: rgb(var(--mint)); }
html.dark select.input { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a0b6c2' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
html.dark input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1); }
html.dark .note { background: rgb(var(--accent) / .12); }
html.dark .err.is-shown::before { color: #0b2236; }
html.dark .switch-ui::after { background: rgb(var(--ink)); }

/* Cards and data components */
html.dark .svc-card, html.dark .effect-card { box-shadow: 0 0 0 1px rgb(var(--line)); }
html.dark .svc-card:hover, html.dark .effect-card:hover { box-shadow: 0 0 0 1px rgb(var(--brand) / .6), var(--shadow-lg); }
html.dark .portal-mock { background: rgb(var(--mint)); }
html.dark .ba-knob { background: rgb(var(--surface)); color: rgb(var(--brand)); }
html.dark .ba-handle { background: rgb(var(--ink)); }
html.dark .stage.is-done .stage-dot, html.dark .cal-day.is-selected, html.dark .slot.is-selected { color: rgb(var(--on-brand)); }
html.dark .g-moderate .g-val { stroke: rgb(var(--moderate)); }
html.dark .c-before { fill: #e0b062; }
html.dark .legend .l-before { background: #e0b062; }
html.dark .c-tip { background: #fff; color: #0b2236; }
html.dark .team-social a { background: rgb(var(--surface)); color: rgb(var(--brand)); }
html.dark .dash-top { background: rgb(var(--bg) / .9); }
html.dark .notif-dot { box-shadow: 0 0 0 2px rgb(var(--mint)); }
html.dark .auth-panel { background: #072d2f; }