/* Dark theme: the same tokens, redefined. Loaded after the other sheets, so
   the page is dark for every visitor (owner Q-188), with no script and no stored choice. Dimmer base, brighter foreground, raised
   surfaces a step lighter (ui-design.md D2); the green is the brand's on-dark green. */

:root {
  --green: #22cc6a;
  --ink: #e9efeb;
  --white: #0d130f;
  --grey-5: #121a15;
  --grey-20: #26332b;
  --grey-30: #3a4a40;
  --grey-60: #a3b2a9;
  --grey-70: #bccac1;
  --tint: #111b15;
  --tint-strong: #16271d;
  --error: #ff8a80;
  --surface: #141d17;
  color-scheme: dark;
}

.card-x,
input,
select,
details {
  background-color: var(--surface);
}

.hero { position: relative; overflow: hidden; background: linear-gradient(180deg, #0f1a13 0%, var(--white) 100%); }
.hero > .container { position: relative; z-index: 1; }

.hero-flow {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}


.cg-demo canvas { background: #1a221d; }

input,
select { border-color: #71877a; }


.group-mod .card-x svg { color: #f59e0b; }
.group-wrk .card-x svg { color: #60a5fa; }