/* ============================================================================
   theme-dark.css — three dark directions for review (design/dark-variations)
   ----------------------------------------------------------------------------
   Loaded after the other four sheets on every page. Nothing here applies
   until <html> carries data-theme, so the light site is unchanged; the review
   switcher (assets/js/theme-switch.js) sets it from ?theme= or the visitor's
   last pick.

     orbit    after Google AI Edge Foresight: deep teal space, a starfield and
              orbit rings round the mark, white pill buttons, sans headlines
     ink      the Wave-K tile itself as the page: ink ground, the mark's pale
              blue for accents, its red dot as the full stop on "Kept."
     cobalt   today's site at night: navy ground, the cobalt we already use,
              the ribbed backdrop dimmed rather than replaced

   Part 1 is shared by all three; parts 2–4 hold what makes each one itself.
   ========================================================================== */

/* ── 1. shared dark foundation ───────────────────────────────────────────── */
:root[data-theme] {
  color-scheme: dark;

  --line:   rgba(255, 255, 255, .09);
  --line-2: rgba(255, 255, 255, .16);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow:    0 18px 48px -22px rgba(0, 0, 0, .7), 0 2px 6px rgba(0, 0, 0, .3);
  --shadow-lg: 0 44px 90px -30px rgba(0, 0, 0, .75), 0 4px 12px rgba(0, 0, 0, .35);

  /* the pictures in the bento and the stacking cards */
  --il-edge:   rgba(255, 255, 255, .09);
  --il-shadow: 0 1px 2px rgba(0, 0, 0, .25), 0 14px 32px -20px rgba(0, 0, 0, .6);
  --il-sk:     rgba(255, 255, 255, .10);
  --il-sk-2:   rgba(255, 255, 255, .06);
  --il-muted:  var(--ink-3);
  --frame-tint: rgba(255, 255, 255, .07);
}

/* hovers and wells were dark ink at a few percent — on a dark page they
   become light at a few percent */
[data-theme] .btn--ghost:hover,
[data-theme] .nav__link:hover,
[data-theme] .nav__toggle:hover { background: rgba(255, 255, 255, .06); border-color: var(--line-2); }
[data-theme] .igrid__cell { background: rgba(255, 255, 255, .03); }
[data-theme] .igrid__cell.has-logo { background: #fff; }      /* third-party marks keep their white tile */

/* the Wave-K tile is dark too, so it needs an edge to stand off the page */
[data-theme] .brand__mark { box-shadow: 0 0 0 1px rgba(255, 255, 255, .1); }
[data-theme] .pipeline__tile,
[data-theme] .igrid__cell.is-core,
[data-theme] .cta-art__core { outline: 1px solid rgba(255, 255, 255, .14); outline-offset: -1px; }
[data-theme] .cta-art__core { box-shadow: 0 0 0 7px rgba(255, 255, 255, .05), 0 16px 34px -14px var(--glow); }

/* illustration details that hard-code a light ground */
[data-theme] .art--tint { background: radial-gradient(70% 80% at 50% 40%, rgba(var(--glow-rgb), .12), transparent 100%); }
[data-theme] .art--rings::before { background: repeating-radial-gradient(circle at 50% 50%, transparent 0 19px, rgba(255, 255, 255, .06) 20px, transparent 21px 22px); }
[data-theme] .discs i { background: radial-gradient(closest-side, transparent 55%, rgba(255, 255, 255, .06)); border-color: rgba(255, 255, 255, .05); }
[data-theme] .doc__ic,
[data-theme] .keycard__field { background: rgba(255, 255, 255, .05); }
[data-theme] .file i { background: rgba(var(--glow-rgb), .14); }
[data-theme] .node { box-shadow: 0 0 0 7px rgba(255, 255, 255, .05), 0 12px 26px -14px rgba(0, 0, 0, .6); }
[data-theme] .laptop__lock { box-shadow: 0 0 0 6px rgba(255, 255, 255, .06), 0 12px 24px -12px var(--glow); }
[data-theme] .laptop__base { background: linear-gradient(180deg, #3A4250, #2A303B); border-color: #3E4654; }
[data-theme] .laptop__base::after { background: #1E232C; }
[data-theme] .cloud-off { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .2); color: var(--ink-3); }
[data-theme] .bars i { background: linear-gradient(180deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, .07) 55%, transparent 100%); }
[data-theme] .cta-art__rings i { border-color: rgba(255, 255, 255, .08); background: radial-gradient(closest-side, transparent 55%, rgba(255, 255, 255, .04)); }
[data-theme] .stack-card,
[data-theme] .feats .stack-card { box-shadow: 0 -1px 0 rgba(255, 255, 255, .05); }
[data-theme] .tile { border-color: var(--line); box-shadow: none; }

/* the hero glow and halos take the theme's glow colour */
[data-theme] .pipeline__halo { background: radial-gradient(closest-side, rgba(var(--glow-rgb), .5), rgba(var(--glow-rgb), .18) 46%, rgba(var(--glow-rgb), 0)); }
[data-theme] .pipeline__tile,
[data-theme] .igrid__cell.is-core {
  box-shadow: 0 0 30px rgba(var(--glow-rgb), .5), 0 0 70px rgba(var(--glow-rgb), .26), 0 22px 46px -18px rgba(0, 0, 0, .6);
}
[data-theme] .igrid::before { background: radial-gradient(closest-side, rgba(var(--glow-rgb), .24), rgba(var(--glow-rgb), .07) 58%, transparent); }
@media (prefers-reduced-motion: no-preference) {
  [data-theme] .igrid__cell.is-core { animation: none; }
}

/* the product screenshots are light-mode captures; sink them a touch so
   they read as pictures on the dark page rather than holes in it */
[data-theme] .shot__fg { box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 30px 60px -24px rgba(0, 0, 0, .8); }

/* ── 2. orbit ─────────────────────────────────────────────────────────────── */
:root[data-theme="orbit"] {
  --bg:        #03232B;
  --surface:   #072E38;
  --surface-2: #0C3843;
  --white:     #0A3540;                 /* cards */
  --ink:       #EAF5F6;
  --ink-2:     #A7C3C8;
  --ink-3:     #7698A0;
  --accent:      #7FD3DF;               /* links; buttons are white pills */
  --accent-ink:  #B4E8EF;
  --accent-soft: rgba(127, 211, 223, .12);
  --accent-line: rgba(127, 211, 223, .32);
  --brand:       #7FD3DF;
  --glow-rgb:  94, 214, 196;
  --glow:      rgba(94, 214, 196, .5);
  --il-blue:   #5ED6C4;
  --il-blue-hi:#9BEADB;
  --pipe-glow: 12, 74, 86;              /* the hero canvas (pipeline-scene.js) */
  --pipe-line: 160, 230, 236;
  --pipe-wave: 94, 214, 196;
}
/* Foresight's headline is a plain sans; ours follows */
[data-theme="orbit"] .h1,
[data-theme="orbit"] .h2,
[data-theme="orbit"] .h3 { font-family: 'Onest', ui-sans-serif, system-ui, sans-serif; font-weight: 400; letter-spacing: -.03em; }
[data-theme="orbit"] .h2 .soft { color: var(--ink-3); }

[data-theme="orbit"] .btn { border-radius: 999px; }
[data-theme="orbit"] .dl__main { border-radius: 999px 0 0 999px; }
[data-theme="orbit"] .dl__toggle { border-radius: 0 999px 999px 0; box-shadow: inset 1px 0 0 rgba(3, 35, 43, .14); }
[data-theme="orbit"] .btn--primary { background: #fff; color: #03232B; box-shadow: 0 10px 30px -10px rgba(94, 214, 196, .45); }
[data-theme="orbit"] .btn--primary:hover { background: #DDF6F2; }
/* the nav's button is the outlined pill, as on the reference */
[data-theme="orbit"] .nav__actions .btn--primary { background: rgba(127, 211, 223, .12); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(127, 211, 223, .38); }
[data-theme="orbit"] .nav__actions .btn--primary:hover { background: rgba(127, 211, 223, .2); }

/* space: a starfield over the whole page, faint enough to sit behind text */
[data-theme="orbit"] body {
  background:
    radial-gradient(1px 1px at 12% 18%, rgba(255,255,255,.5), transparent 60%),
    radial-gradient(1px 1px at 78% 9%,  rgba(255,255,255,.4), transparent 60%),
    radial-gradient(1.5px 1.5px at 33% 61%, rgba(255,255,255,.35), transparent 60%),
    radial-gradient(1px 1px at 91% 44%, rgba(255,255,255,.4), transparent 60%),
    radial-gradient(1px 1px at 56% 83%, rgba(255,255,255,.3), transparent 60%),
    radial-gradient(1px 1px at 4% 72%,  rgba(255,255,255,.35), transparent 60%),
    radial-gradient(1px 1px at 47% 31%, rgba(255,255,255,.25), transparent 60%),
    var(--bg);
  background-size: 620px 620px, 620px 620px, 620px 620px, 620px 620px, 620px 620px, 620px 620px, 620px 620px, auto;
}

/* the hero stage: orbit rings and coloured planets round the mark */
[data-theme="orbit"] .hero-stage { border-bottom-color: transparent; }
[data-theme="orbit"] .hero-stage__bg,
[data-theme="orbit"] .end-cta__bg {
  background:
    radial-gradient(ellipse 34% 30% at 50% 52%, rgba(94, 214, 196, .16), transparent 70%),
    repeating-radial-gradient(ellipse 100% 36% at 50% 52%, transparent 0 78px, rgba(127, 211, 223, .22) 79px, transparent 80.5px),
    radial-gradient(ellipse 90% 70% at 50% 100%, #06404A, transparent 70%),
    var(--bg);
}
[data-theme="orbit"] .hero-stage__bg::after {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 18% 66%, #E9725E 0 5px, transparent 6px),
    radial-gradient(circle at 27% 47%, #B57CF0 0 6px, transparent 7px),
    radial-gradient(circle at 8% 58%,  #4FA6F2 0 7px, transparent 8px),
    radial-gradient(circle at 70% 38%, #F0A23C 0 4px, transparent 5px),
    radial-gradient(circle at 82% 70%, #7BE070 0 6px, transparent 7px),
    radial-gradient(circle at 63% 86%, #9B7BF7 0 5px, transparent 6px),
    radial-gradient(circle at 40% 82%, #6FD3E8 0 6px, transparent 7px),
    radial-gradient(circle at 93% 41%, #5ED6A0 0 4px, transparent 5px);
  opacity: .9;
}
[data-theme="orbit"] .end-cta { background: var(--surface); }

/* ── 3. ink ───────────────────────────────────────────────────────────────── */
:root[data-theme="ink"] {
  --bg:        #0E1218;
  --surface:   #141A22;                 /* the Wave-K tile's own colour */
  --surface-2: #1B232E;
  --white:     #18202A;
  --ink:       #E9EDF2;                 /* the mark's tall bar */
  --ink-2:     #A4AEBC;
  --ink-3:     #737F90;
  --accent:      #8EC5EA;               /* the mark's sound bars */
  --accent-ink:  #BBDDF3;
  --accent-soft: rgba(142, 197, 234, .12);
  --accent-line: rgba(142, 197, 234, .32);
  --brand:       #8EC5EA;
  --glow-rgb:  142, 197, 234;
  --glow:      rgba(142, 197, 234, .5);
  --il-blue:   #8EC5EA;
  --il-blue-hi:#BBDDF3;
  --pipe-glow: 30, 42, 58;
  --pipe-line: 233, 237, 242;
  --pipe-wave: 142, 197, 234;
}
[data-theme="ink"] .btn--primary { background: #8EC5EA; color: #0E1218; box-shadow: 0 10px 28px -12px rgba(142, 197, 234, .55); }
[data-theme="ink"] .btn--primary:hover { background: #A9D4F0; }
[data-theme="ink"] .dl__toggle { box-shadow: inset 1px 0 0 rgba(14, 18, 24, .18); }
/* "Kept." — the red dot from the mark, as in the logo study's wordmark */
[data-theme="ink"] .brand::after { content: '.'; color: #E5484D; margin-left: -9px; }

/* the backdrop echoes the mark: tall pale bars rising out of the ink */
[data-theme="ink"] .hero-stage__bg,
[data-theme="ink"] .end-cta__bg {
  background:
    radial-gradient(ellipse 60% 55% at 50% 100%, rgba(142, 197, 234, .22), transparent 70%),
    repeating-linear-gradient(90deg, transparent 0 46px, rgba(142, 197, 234, .05) 46px 52px, transparent 52px 98px),
    linear-gradient(180deg, var(--bg), #101A26 80%);
}
[data-theme="ink"] .end-cta { background: var(--surface); }

/* ── 4. cobalt ────────────────────────────────────────────────────────────── */
:root[data-theme="cobalt"] {
  --bg:        #0A0F1E;
  --surface:   #10172B;
  --surface-2: #172038;
  --white:     #131B31;
  --ink:       #EEF1F8;
  --ink-2:     #A6AFC4;
  --ink-3:     #7480A0;
  --accent:      #86A6F8;               /* links on navy; the buttons keep the brand cobalt */
  --accent-ink:  #B2C6FB;
  --accent-soft: rgba(90, 135, 242, .14);
  --accent-line: rgba(90, 135, 242, .36);
  --glow-rgb:  90, 135, 242;
  --glow:      rgba(90, 135, 242, .55);
  --pipe-glow: 24, 36, 72;
  --pipe-line: 200, 214, 255;
  --pipe-wave: 90, 135, 242;
}
[data-theme="cobalt"] .btn--primary,
[data-theme="cobalt"] .btn--accent { background: #2D5BE3; }
[data-theme="cobalt"] .btn--primary:hover,
[data-theme="cobalt"] .btn--accent:hover { background: #3D6BF0; }

/* the same ribbed picture as the light site, taken down to night */
[data-theme="cobalt"] .hero-stage__bg,
[data-theme="cobalt"] .end-cta__bg {
  background: var(--bg) url("../img/bg/ribbed-blue.webp") center bottom / cover no-repeat;
  filter: brightness(.42) saturate(1.5) contrast(1.15);
}
[data-theme="cobalt"] .end-cta { background: var(--surface); }

/* ── review switcher (this branch only) ──────────────────────────────────── */
.theme-switch {
  position: fixed; right: 16px; bottom: 16px; z-index: 200;
  display: flex; gap: 4px; padding: 4px;
  border-radius: 999px;
  background: rgba(18, 22, 32, .88);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .1);
  font: 500 13px/1 'Onest', system-ui, sans-serif;
}
.theme-switch button {
  border: 0; cursor: pointer;
  padding: 8px 12px; border-radius: 999px;
  background: transparent; color: rgba(255, 255, 255, .7);
}
.theme-switch button:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.theme-switch button[aria-pressed="true"] { background: #fff; color: #121620; }
.theme-switch button:focus-visible { outline: 2px solid #8EC5EA; outline-offset: 2px; }
@media (max-width: 480px) {
  .theme-switch { left: 16px; right: 16px; justify-content: space-between; }
  .theme-switch button { padding: 8px 10px; }
}

/* ── 5. the rest of the hard-coded light grounds (found in review) ───────── */
:root[data-theme] { --bento-bg: var(--surface); }
[data-theme] .integration:hover { background: var(--surface-2); }
[data-theme] .type-demo__bar { background: rgba(255, 255, 255, .05); border-bottom-color: var(--line); }
[data-theme] .type-demo__bar i,
[data-theme] .wave i { background: rgba(255, 255, 255, .18); }
[data-theme] .wcall__panel,
[data-theme] .note > img, [data-theme] .note__off { background: rgba(255, 255, 255, .05); }
[data-theme] .pill--amber { background: rgba(214, 150, 20, .16); color: #F2C76B; }
[data-theme] .pill--green { background: rgba(43, 138, 87, .18); color: #7FD8A4; }
[data-theme] .wflag__pair { background: rgba(214, 150, 20, .08); border-color: rgba(214, 150, 20, .22); }
[data-theme] .say--on { background: rgba(var(--glow-rgb), .14); border-color: rgba(var(--glow-rgb), .32); color: var(--accent-ink); }
[data-theme] .doc__row.is-in .sk { background: rgba(var(--glow-rgb), .35); }
[data-theme] .cta-art__rec { box-shadow: 0 0 0 3px var(--surface); }