/* ============================================================================
   HALON — Instrument Kit theming  (_kit.css)
   Day/night skin for the physical device shell shared by every instrument.

   Night (default) is untouched — each instrument keeps its own dark chassis and
   glowing glass. This file only supplies the DAY skin (the boardroom lights come
   on): pale enamel + brushed-aluminium chassis, pale glass wells, soft daylight
   shadows. The lit readout itself is repainted by _kit.js. Smooth transitions
   on every surface so a host theme toggle glides instead of snapping.

   Control strips already use design tokens (--surface-*, --fg-*, --border-*),
   which flip automatically with data-theme — so they are left to the tokens.
   ============================================================================ */

/* smooth the day/night handoff on every shell surface (both themes) */
body,
.module, .crt, .screen, .vfd, .board, .bridge, .subboard,
.tube, .ctrls, #vtext {
  transition:
    background-color var(--dur-slow, 280ms) var(--ease, ease),
    background var(--dur-slow, 280ms) var(--ease, ease),
    box-shadow var(--dur-slow, 280ms) var(--ease, ease),
    border-color var(--dur-slow, 280ms) var(--ease, ease),
    color var(--dur-slow, 280ms) var(--ease, ease);
}

/* ---------------------------------------------------------------------------
   DAY SKIN
   --------------------------------------------------------------------------- */
:root[data-theme="light"] body {
  background: radial-gradient(85% 78% at 50% 24%, #F6F4EC 0%, #E9E7DE 55%, #DBD9CF 100%);
  color: var(--fg-1);
}

/* device chassis — brushed pale aluminium / enamel */
:root[data-theme="light"] .module {
  background:
    linear-gradient(180deg, #FCFBF6 0%, #F1EFE8 7%, #E8E6DD 52%, #DEDCD2 93%, #ECEAE2 100%);
  box-shadow:
    0 1px 0 rgba(255,255,255,.8) inset,
    0 -2px 0 rgba(120,114,100,.12) inset,
    0 28px 64px rgba(60,56,48,.18),
    0 4px 14px rgba(60,56,48,.12);
}
:root[data-theme="light"] .module-top .wm { color: #4a463f; }
:root[data-theme="light"] .module-top .mdl,
:root[data-theme="light"] .panel .ph .mdl { color: #8d887c; }
:root[data-theme="light"] .panel .ph { border-bottom-color: var(--line); }
:root[data-theme="light"] .screw {
  background: radial-gradient(circle at 35% 30%, #d8d4c8, #a39d8d);
  box-shadow: 0 1px 1px rgba(255,255,255,.6), inset 0 0 0 1px rgba(120,114,100,.25);
}

/* screen / glass wells — pale panel, soft inset, no black bezel */
:root[data-theme="light"] .crt,
:root[data-theme="light"] .screen,
:root[data-theme="light"] .vfd,
:root[data-theme="light"] .board,
:root[data-theme="light"] .bridge,
:root[data-theme="light"] .subboard {
  background: linear-gradient(180deg, #F3F1EA 0%, #EAE8DF 70%, #E4E2D8 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(120,114,100,.18),
    inset 0 2px 10px rgba(60,56,48,.10) !important;
}

/* nixie tubes — clear glass in daylight rather than dark vacuum */
:root[data-theme="light"] .tube {
  background:
    radial-gradient(70% 50% at 50% 100%, rgba(0,0,0,.04), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.5) 0%, rgba(236,233,224,.7) 45%, #E6E3DA 100%);
  box-shadow: inset 0 0 0 1px rgba(120,114,100,.18), inset 0 6px 14px rgba(60,56,48,.10), 0 1px 3px rgba(60,56,48,.10);
}
:root[data-theme="light"] .tube .mesh { opacity: .22; }

/* In daylight the CRT finishes (scanlines, glare, vignette, mesh) read as grime,
   not signal — fade them right back so the readout stays clean and modern. */
:root[data-theme="light"] .scan,
:root[data-theme="light"] .crt .scan,
:root[data-theme="light"] .screen .scan,
:root[data-theme="light"] .vfd-mesh,
:root[data-theme="light"] .tube .pool { opacity: .12; }
:root[data-theme="light"] .glare,
:root[data-theme="light"] .crt .glare,
:root[data-theme="light"] .screen .glare,
:root[data-theme="light"] .vfd-glare { opacity: .35; }
:root[data-theme="light"] .vig,
:root[data-theme="light"] .crt .vig,
:root[data-theme="light"] .screen .vig,
:root[data-theme="light"] .vfd-vig {
  box-shadow: none !important;
  background: radial-gradient(120% 120% at 50% 50%, transparent 64%, rgba(120,114,100,.14) 100%) !important;
}

/* embedded wells (host side) follow the theme too, set by the host;
   here we just make sure a standalone light page has no black frame */
:root[data-theme="light"] .ctrls .div { background: var(--line-strong); }