/* NAMCHE landing - modes. A special rule on top of the core: loaded after site.css, changes nothing unless
   <html> carries data-mode="night" or data-ground-view. Delete this file and js/modes.js and the core is as it
   was. The night re-pointing lives in tokens/site/night.json. Everything here is an override of a light ground
   or a comparison view; no new colour: tokens only.

   Two axes. Mode (day | night) is page-wide and changes the semantics: ink, ground, hairline, mark. Ground
   (light | dark) is per scene and changes ground and ink, never the tones. Tones, the hook (Hestia) and
   the colour grounds are paint: identical in day and night. */

/* Mode (production bar N, ?mode=night): the second axis next to the Ground. The re-pointing of the
   semantics lives in tokens/site/night.json (html[data-mode="night"] in css/tokens.css). This file
   only adds color-scheme, and the places a light ground must take the day accent back. Light scenes
   take the dark ground (modes.js flips their data-ground for nav and cursor). Tones, colour grounds
   (data-theme="color") and the hook stay: paint is paint at midnight. */
html[data-mode="night"]{color-scheme:dark}

/* A colour field stays light, so the night accent (Lapislazuli 300) would sit on Helios. It takes the
   day accent again, and the ring is read in the same rule so it is not stuck on the colour resolved at the root. */
html[data-mode="night"] [data-theme="color"]{
  --accent-system:var(--color-secondary-800);
  --focus-ring:var(--accent-system);
}

/* Ground view (production bar G): every scene on one ground, to compare light | dark side by side.
   !important beats the inline text pick site.js sets on the colour scenes. A comparison tool, not a mode. */
html[data-ground-view="light"] .scene{--surface-page:var(--gaia-selene)!important;--text-primary:var(--ink-on-gaia-selene)!important;--text-muted:var(--ink-on-gaia-selene)!important;--line-rule:var(--ink-on-gaia-selene)!important;--mark-color:var(--ink-on-gaia-selene)!important}
html[data-ground-view="dark"] .scene{--surface-page:var(--ground-dark)!important;--text-primary:var(--gaia-selene)!important;--text-muted:var(--gaia-selene)!important;--line-rule:var(--gaia-selene)!important;--mark-color:var(--gaia-selene)!important}

/* 03: the twelve stars are Selene on the yellow ground; on the Light view the ground is Selene too and they vanish.
   They take the ink there (Erebos). */
html[data-ground-view="light"] .bigtype__stars i::after{background:var(--text-primary)}

/* ── Production bar: the Mode menu js/modes.js adds (Landing and Brand are site.css, js/prodnav.js) ──
   The menu is the Layout pattern; the pressed option is filled (.prodbar__btn / .prodbar__opt). */
.prodbar__panel--look{min-width:var(--panel-min-lg);gap:var(--space-8);padding:var(--space-8)}
.prodbar__row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-16)}
.prodbar__row-label{display:flex;align-items:baseline;gap:var(--space-8)}
.prodbar__row-label kbd{font:inherit}
.prodbar__seg{display:flex;gap:var(--space-4)}
.prodbar__panel--look .prodbar__read{margin-top:0}
.prodbar__panel [hidden]{display:none}
@media (max-width:599px){
  .prodbar__pre{display:none}
  .prodbar__row-label kbd{display:none}
}

/* ── Night: what the core hardcodes ────────────────────────────────
   The audit (Ink x ground, borders, hairlines, svg) found these; everything else follows the semantics above. */

/* 02: the statement panel and the coordinate bar carry Erebos ink in the core. At night the panel is raised
   (--surface-card-quiet above) and takes the ink. The coordinate bar is a Selene chip with Erebos ink while it
   travels over the milky video, where Selene ink would not read; once the panel lies under it (.is-docked,
   site.js) it takes the panel's colours and merges into it, as it does by day. Reduced motion: always on the panel. */
html[data-mode="night"] .reveal__panel{color:var(--text-primary)}
html[data-mode="night"] .reveal__coords-bar{background:var(--gaia-selene);transition:background-color var(--dur-base) var(--ease-standard)}
html[data-mode="night"] .reveal__coords-text{transition:color var(--dur-base) var(--ease-standard)}
html[data-mode="night"] .reveal__coords.is-docked .reveal__coords-bar{background:var(--surface-card-quiet)}
html[data-mode="night"] .reveal__coords.is-docked .reveal__coords-text{color:var(--text-primary)}
@media (prefers-reduced-motion:reduce){
  html[data-mode="night"] .reveal__coords-bar{background:var(--surface-card-quiet);transition:none}
  html[data-mode="night"] .reveal__coords-text{color:var(--text-primary);transition:none}
}

/* The nav sits outside the scenes and takes the ground under it (.dark or not, site.js). Night re-points the root, so a
   light-ground nav (over a colour scene, or in the Light view) would get Selene ink on Selene or Helios: it takes the
   day ink again. Its mark, links and CTA all read these. */
html[data-mode="night"] .nav:not(.dark){
  color-scheme:light;
  --text-primary:var(--ink-on-gaia-selene);
  --text-link:var(--ink-on-gaia-selene);
  --text-link-hover:var(--ink-on-gaia-selene);
  --line-hairline:var(--namche-black);
  --line-rule:var(--ink-on-gaia-selene);
  --accent-system:var(--color-secondary-800);
  --focus-ring:var(--accent-system);
  --mark-color:var(--ink-on-gaia-selene);
}

/* Hairlines: the core draws the hero foot and the marquee rule in Selene ("full Selene, not muted"). They follow
   the ink instead, which is Selene on every dark ground and Ink on every light one. */
html[data-mode] :is(.hero__foot,.marquee__mono),
html[data-ground-view] :is(.hero__foot,.marquee__mono){border-top-color:var(--text-primary)}

/* The scroll arrow (hero) is Selene in the core, like the hairline above: on a Light or Color hero it would vanish. */
html[data-mode] .scrollcue,
html[data-ground-view] .scrollcue{color:var(--text-primary)}