/* =========================================================================
   /css/theme-light.css: the light theme's leftovers

   The PALETTE is css/tokens.css ([data-theme="light"] re-values every token,
   with the two accents swapping roles). Component rules use tokens, so they
   need nothing here. This file holds only what a token cannot express: the
   ground layers, the starfield fade, and the surfaces that stay dark in both
   themes. Every rule is scoped to html[data-theme="light"], so the file is
   inert on the dark default.
   ========================================================================= */

/* The 25% black scrim deepens the dark ground; on white it only greys. */
html[data-theme="light"] .global-darken{ display: none; }

/* The blurred ground gradient is dimmed with brightness(.9) for depth on
   black; on white that is a grey cast. Full brightness, a touch more color. */
html[data-theme="light"] .bg{ filter: blur(6px) brightness(1) saturate(1.15); }

/* The starfield is drawn by src/components/starfield.js in the theme's star
   color (deep violet on white). Its fade lands lower so the specks read as
   texture, not a pattern. */
html[data-theme="light"] #bg-stars{ animation: fvStarFadeLight 3.7s ease forwards; }
@keyframes fvStarFadeLight{
  0%{opacity:0}
  60%{opacity:.16}
  100%{opacity:.42}
}

/* The markdown and legal viewers' code blocks keep a dark surface and light
   text in both themes. The operator desks' <pre> blocks (.na-detail, .adm-raw,
   .adm-pre, .p8-body, .bd-diff) and the API console's raw view are not pinned:
   they follow the theme. */
html[data-theme="light"] .md-view pre,
html[data-theme="light"] .md-view code,
html[data-theme="light"] .legal-content pre,
html[data-theme="light"] .legal-content code{
  background: #0f1626;
  color: #dfe7ff;
}

/* ====== API CONSOLE (2026-10-05) ======
   The console follows the theme. Its ground is --console-ground and its
   syntax engine reads the --console-* tokens, all re-valued for light in
   css/tokens.css, so the raw view, the body editor, the ghost bubble and the
   depth rotation need no pin here. The chrome rules below only re-ground the
   white-alpha films that would vanish on the light panel. */

/* The highlight layer is an absolute overlay ON the frame, which carries the
   ground; it stays clear or it paints over the frame's validity border. */
html[data-theme="light"] .po-json-highlight{ background: transparent; }

/* The chrome around the terminal follows the LIGHT panel, so the films and
   hairlines drawn in white alpha have to become ink alpha or they vanish. */
html[data-theme="light"] #consoleView #po-api-format,
html[data-theme="light"] #consoleView #po-api-minify,
html[data-theme="light"] #consoleView #po-api-repair{
  background: rgba(27,22,56,.04);
  border-color: rgba(27,22,56,.28);
}
html[data-theme="light"] #consoleView #po-api-curl{
  background: rgba(27,22,56,.05);
}
html[data-theme="light"] #consoleView .po-view-toggle-track{
  background: rgba(27,22,56,.06);
}
/* The copy toast: its colors live in viewer-console.css (.po-copy-toast) so
   this can re-value them. On light it is a light card with ink text. */
html[data-theme="light"] .po-copy-toast{
  background: rgba(255,255,255,.96);
  color: var(--ink);
  box-shadow: 0 10px 34px rgba(30,20,64,.18);
}

/* The header's glass over a white ground needs a little more body so the
   DNA reads against the page. */
html[data-theme="light"] header{ background: rgba(255,255,255,.55); }

/* Selection color follows the primary. */
html[data-theme="light"] ::selection{ background: rgba(109,40,217,.22); }

/* The page ground is painted explicitly. base.css keeps html/body transparent
   so the dark theme shows the browser's own dark canvas; on light the canvas
   must be ours, or an embedded viewer's dark ground bleeds through the
   translucent nebula tints. */
html[data-theme="light"]{ background: var(--bg-deep) !important; }

/* The hero tagline is the starred primary label; it needs the full primary
   on a light ground, not the softened accent. */
html[data-theme="light"] .hero-tagline{ color: var(--brand-600); opacity: 1; }

/* The hero's creation-flow scenes: Field Node Manager and the 3D Suite are
   device UIs drawn as translucent black panels over the dark ground. On white
   those panels turn grey and the LED text loses its contrast. Here they get
   the opaque dark ground they assume, and the labels that sit on the page
   itself take readable light-theme accents. */
html[data-theme="light"] .fm-card,
html[data-theme="light"] .fm-cmds,
html[data-theme="light"] .gs-tree,
html[data-theme="light"] .gs-tool{
  background: #0b0f14;
  border-color: rgba(255,255,255,.16);
  box-shadow: 0 8px 24px rgba(30,20,64,.18);
}
html[data-theme="light"] .fm-connect{
  color: #0e7c9c;
  border-color: rgba(14,124,156,.45);
  background: rgba(14,124,156,.08);
}
html[data-theme="light"] .fm-det{ color: #0b7a5e; }
html[data-theme="light"] .hs-brand u{
  background: linear-gradient(120deg, #4c3fa3, #6d28d9 55%, #0e9c8b);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}