/* ==========================================================================
   Dark mode
   Closes the open item in build-spec §10. Two rules from §1 are what make
   it work rather than merely darker:

     - Ultramarine is 2.2:1 on black, so every accent becomes Signal.
     - Small text never below 4.5:1 on its ground.

   The tokens flip, and then each surface that used --onyx as a *background*
   rather than as ink is given its own dark value — otherwise the reel and
   the footer would invert into light bands while the page went dark.
   ========================================================================== */

:root[data-theme='dark'] {
  --paper: #0A0B0D;
  --onyx: #F2F3F5;            /* ink, not ground */
  --slate: #9BA2A9;
  --ink-soft: #C2C7CD;
  --hairline: #24282D;
  --rule-faint: #191C20;
  --grey-mid: #7D848B;
  --grey-dark: #8A9199;
  --dot-off: #3A3F45;
  --rule-dark: #2A2F35;
  --band: #121519;
  --field: #14171B;
  --tag-bg: #16204A;

  /* §1: on dark grounds the accent is Signal. Ultramarine stays only
     where it sits on something pale. */
  --ultramarine: #6E8CFF;
  --crowdflower: #8BA3FF;
}

:root[data-theme='dark'] body { background: var(--paper); }

/* --- surfaces that were dark by design, kept dark ---------------------- */

:root[data-theme='dark'] .reel {
  background: #121519;
  color: #F2F3F5;
}

:root[data-theme='dark'] .photo { color: #F2F3F5; }
:root[data-theme='dark'] .next-case { background: #121519; color: #F2F3F5; }
:root[data-theme='dark'] .topbar { background: var(--paper); }

:root[data-theme='dark'] .case-figure--neutral { background: #15171A; }

/* --- the glossy pill, in white plastic (§10) --------------------------- */

:root[data-theme='dark'] .pill:not(#theme-toggle) {
  color: #0B0C0E;
  background:
    linear-gradient(177deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.72) 8%, rgba(255,255,255,0.52) 20%, rgba(255,255,255,0.42) 30%),
    radial-gradient(52% 132% at 23% 45%, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.18) 40%, rgba(255,255,255,0) 72%),
    radial-gradient(150% 180% at 15% -44%, rgba(255,255,255,0.75) 0%, rgba(255,255,255,0.25) 46%, rgba(255,255,255,0) 70%),
    linear-gradient(178deg, #FDFDFE 0%, #DADDE2 48%, #B9BEC6 100%);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.95),
    inset 0 -1px 1px rgba(0,0,0,0.16),
    inset 0 0 22px rgba(0,0,0,0.07),
    0 1px 2px rgba(0,0,0,0.5),
    0 10px 26px -8px rgba(0,0,0,0.6);
}

:root[data-theme='dark'] .pill:not(#theme-toggle):hover {
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.95),
    inset 0 -1px 1px rgba(0,0,0,0.18),
    inset 0 0 22px rgba(0,0,0,0.05),
    0 1px 2px rgba(0,0,0,0.5),
    0 16px 34px -10px rgba(0,0,0,0.66);
}

/* The hero button is drawn by the shader, which inverts itself; the CSS
   pill underneath must not show through with the light treatment. */
:root[data-theme='dark'] .hero.is-live .venom-btn {
  background: transparent;
  box-shadow: none;
  color: #0B0C0E;
  text-shadow: 0 1px 0 rgba(255,255,255,.4);
}

/* --- knobs in white (§10) ---------------------------------------------- */

:root[data-theme='dark'] .knob {
  background:
    repeating-conic-gradient(from 0deg, rgba(0,0,0,0.16) 0deg 1.1deg, rgba(0,0,0,0) 1.1deg 6deg),
    linear-gradient(177deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.6) 10%, rgba(255,255,255,0.3) 30%),
    radial-gradient(120% 120% at 50% 118%, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0) 54%),
    linear-gradient(178deg, #FBFBFC 0%, #D9DCE1 48%, #BCC1C8 100%);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.95),
    inset 0 -1px 1px rgba(0,0,0,0.14),
    inset 0 0 14px rgba(0,0,0,0.07),
    0 1px 2px rgba(0,0,0,0.5),
    0 5px 14px -5px rgba(0,0,0,0.55);
}

:root[data-theme='dark'] .knob__cap {
  background:
    linear-gradient(177deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.5) 20%, rgba(255,255,255,0.2) 48%),
    linear-gradient(178deg, #F6F7F8 0%, #DEE1E6 50%, #C6CBD2 100%);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.9), 0 1px 3px rgba(0,0,0,0.3);
}

/* the indicator has to flip too, or it vanishes into the white cap */
:root[data-theme='dark'] .knob__hand::after { background: #15181C; }
:root[data-theme='dark'] .knob-unit__meter { background: var(--hairline); }
:root[data-theme='dark'] .knob-unit__meter span { background: #F2F3F5; }

/* --- glass, which was built for pale grounds --------------------------- */

:root[data-theme='dark'] .glass,
:root[data-theme='dark'] .glass--over-dark {
  background: linear-gradient(142deg, rgba(255,255,255,0.11) 0%, rgba(255,255,255,0.06) 48%, rgba(255,255,255,0.04) 100%);
  border-color: rgba(255,255,255,0.16);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.20),
    inset 0 -1px 0 rgba(255,255,255,0.06),
    0 2px 6px -2px rgba(0,0,0,0.6),
    0 16px 40px -16px rgba(0,0,0,0.8);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root[data-theme='dark'] .glass,
  :root[data-theme='dark'] .glass--over-dark { background: rgba(28,32,38,0.86); }
}

:root[data-theme='dark'] .proof__name { color: #F2F3F5; }
:root[data-theme='dark'] .proof__role { color: #A7AEB6; }

/* --- edges that were painted in the page colour ------------------------ */

:root[data-theme='dark'] .proof__fade--left,
:root[data-theme='dark'] .proof__fade--right { display: none; }

:root[data-theme='dark'] .scrim {
  -webkit-backdrop-filter: blur(14px) brightness(0.9);
  backdrop-filter: blur(14px) brightness(0.9);
}

:root[data-theme='dark'] .circle-btn { border-color: var(--hairline); color: var(--onyx); }
:root[data-theme='dark'] .tag { color: #C3D0FF; background: #1B2447; }

/* --- the toggle itself -------------------------------------------------- */

#theme-toggle { cursor: pointer; }

/* In dark the bulb is lit, so it is white — and the button keeps the dark
   lacquer of the light theme rather than taking the white plastic the
   other pills get, because a white bulb on a white button is nothing. */
:root[data-theme='dark'] #theme-toggle { color: #FFFFFF; }
:root[data-theme='dark'] #theme-toggle svg { color: #FFFFFF; }