/* ============================================================
   VDR SITES — shared dark "control room" skin + theme toggle
   Applies to pages built on z-team-page.css tokens.
   Skin key: html[data-skin="dark"]
   ============================================================ */

/* Every token this file does NOT override falls through to its light-mode value
   and gets rendered on a near-black ground. That is how --danger shipped at
   3.23:1 in dark mode. The status colours were the ones left behind; cctv.css
   had already worked out the right dark values, so these are those.
   RULE: a new token in z-team-page.css needs a decision here -- override it, or
   satisfy yourself it reads on #0E1013. Silence is not a decision. */
html[data-skin="dark"]{
  --paper:        #0E1013;
  --paper-2:      #14171B;
  --ink:          #E7E9EC;   /* 15.66:1 */
  --ink-dim:      #9AA0A7;   /*  7.22:1 */
  --masthead:     #0B1523;
  --accent-ink:   #6EA8FF;   /*  7.90:1 */
  --hairline:     #23262B;
  --hairline-2:   #1C1F24;
  --surface-card: #14171B;
  --surface-raised: #16191D;

  /* status: on a dark ground the ink/fill split inverts -- these read as both */
  --live:         #5FBF6E;   /*  8.31:1 */
  --live-ink:     #5FBF6E;
  --warn:         #E0B24E;   /*  9.66:1 */
  --danger:       #FB6A70;   /*  6.71:1  (was #B23A3A = 3.23:1) */
  --field-line:   #666D76;   /*  3.37:1 on --surface-raised, 3.64:1 on --paper */
}
html[data-skin="dark"] body{ background:var(--paper); color:var(--ink); }

/* brand plates (engraved Z, logos designed for paper) */
html[data-skin="dark"] .hero__z img,
html[data-skin="dark"] .tzcard__side img{
  mix-blend-mode:screen; filter:invert(1) hue-rotate(180deg);
}
html[data-skin="dark"] ::selection{ background:var(--accent-ink); color:#0E1013; }

/* masthead CTA button stays legible */
html[data-skin="dark"] .masthead .btn{ background:var(--accent-ink); border-color:var(--accent-ink); color:#0B1523; }

/* ---- theme toggle button (masthead) ---- */
/* 44x44 hit area (SC 2.5.5) without a 44px-looking button: the visual box stays
   30px, the touch target is grown with a transparent ::after. */
.iconbtn{
  font-family:var(--font-mono); font-size:13px; color:rgba(255,255,255,0.7);
  background:transparent; border:1px solid rgba(255,255,255,0.24);
  width:30px; height:30px; display:inline-grid; place-items:center; cursor:pointer;
  transition:.15s; border-radius:0; padding:0; position:relative;
}
.iconbtn::after{
  content:""; position:absolute; top:50%; left:50%;
  width:44px; height:44px; transform:translate(-50%,-50%);
}
.iconbtn:hover{ color:#fff; border-color:rgba(255,255,255,0.5); }