/* ============================================================================
   Dark-mode token remap for preview cards.

   Activated by `data-theme="dark"` on <body> (or <html>) — the floating
   theme toggle injected by `_theme-toggle.js` flips this attribute.

   Strategy mirrors `ui_kits/cos-library/dark-mode.css`:
     • Re-map the neutral scale + semantic surface tokens for a deep navy
       palette so anything using `var(--color-bg-surface)`, `var(--color-fg-default)`,
       etc. automatically reads on dark.
     • Brand primary/semantic hues stay close to their light values for
       recognisability; their *_50 / *_100 tints collapse to translucent
       overlays so they read on the dark surface.
     • Patch raw `white`-literal rules in preview-local stylesheets
       (`_card.css`, per-card <style> blocks) that don't go through tokens.
   ============================================================================ */

@layer theme {
body[data-theme="dark"],
html[data-theme="dark"] body {
  /* ── Neutrals (inverted) ────────────────────────────────────────────── */
  --gov-color-neutral-0:   #1a2030;
  --gov-color-neutral-50:  #232a3c;
  --gov-color-neutral-100: #2a3142;
  --gov-color-neutral-200: #404a64;   /* bumped so inputs read against card */
  --gov-color-neutral-300: #54607c;   /* bumped for strong-border parity */
  --gov-color-neutral-400: #5a657e;
  --gov-color-neutral-500: #7d8a9f;
  --gov-color-neutral-600: #9aa4b6;
  --gov-color-neutral-700: #bbc2d0;
  --gov-color-neutral-800: #d8dde5;
  --gov-color-neutral-900: #ebeef3;

  /* ── Surface tokens ─────────────────────────────────────────────────── */
  --color-bg-page:        #0d1320;
  --color-bg-surface:     #1a2030;
  --color-bg-subtle:      #14192a;
  --color-bg-muted:       #2a3142;

  --color-fg-default:     #e6ebf2;
  --color-fg-secondary:   #aab4c2;
  --color-fg-tertiary:    #7e8898;

  /* Borders — bumped from #2a3142 / #3a4255 so the 1 px stroke is actually
     visible against both the card surface (#1a2030) and the slightly-darker
     field "well" (#14192a). The previous values landed within ~2 ΔL of both
     bgs and disappeared on inputs / dividers / separators. */
  --color-border-default: #404a64;
  --color-border-strong:  #54607c;

  /* ── Primary ────────────────────────────────────────────────────────── */
  --gov-color-primary-50:  rgba(82, 142, 210, 0.12);
  --gov-color-primary-100: rgba(82, 142, 210, 0.20);
  --gov-color-primary-200: rgba(82, 142, 210, 0.32);
  --gov-color-primary-400: #4e8cc8;
  --gov-color-primary-500: #5a98d0;
  --gov-color-primary-600: #6fa6d8;
  --gov-color-primary-700: #b9d2ec;

  /* ── Semantic ───────────────────────────────────────────────────────── */
  --gov-color-success-50:  rgba(46, 160, 84, 0.14);
  --gov-color-success-100: rgba(46, 160, 84, 0.26);
  --gov-color-success-500: #4aae6a;
  --gov-color-success-700: #a8d8b6;

  --gov-color-warning-50:  rgba(214, 158, 46, 0.14);
  --gov-color-warning-100: rgba(214, 158, 46, 0.26);
  --gov-color-warning-500: #d69e2e;
  --gov-color-warning-700: #f0c878;

  --gov-color-error-50:    rgba(220, 86, 102, 0.14);
  --gov-color-error-100:   rgba(220, 86, 102, 0.26);
  --gov-color-error-500:   #dc5666;
  --gov-color-error-600:   #c63d4e;
  --gov-color-error-700:   #f0a8b1;

  --gov-color-info-50:     rgba(82, 168, 220, 0.14);
  --gov-color-info-100:    rgba(82, 168, 220, 0.26);
  --gov-color-info-500:    #52a8dc;
  --gov-color-info-700:    #a8d4ec;

  /* ── Document types (a touch brighter so the bands read) ────────────── */
  --doc-cos:      #4a89c4;
  --doc-cos-bg:   rgba(74, 137, 196, 0.14);
  --doc-stanag:   #8a96a3;
  --doc-stanag-bg:rgba(138, 150, 163, 0.14);
  --doc-stanrec:  #9b85c6;
  --doc-stanrec-bg:rgba(155, 133, 198, 0.14);
  --doc-ap:       #5fa395;
  --doc-ap-bg:    rgba(95, 163, 149, 0.14);

  /* Availability bgs */
  --avail-public-bg:     rgba(74, 174, 106, 0.16);
  --avail-login-bg:      rgba(82, 168, 220, 0.16);
  --avail-controlled-bg: rgba(214, 158, 46, 0.20);
  --avail-metadata-bg:   rgba(125, 138, 159, 0.18);

  /* ── Link / focus ───────────────────────────────────────────────────── */
  --color-fg-link:        #6fa6d8;
  --color-fg-link-visited:#b196d6;
  --shadow-focus:         0 0 0 2px var(--color-bg-surface), 0 0 0 5px rgba(140, 190, 240, 0.60);
  --shadow-focus-error:   0 0 0 2px var(--color-bg-surface), 0 0 0 5px rgba(240, 130, 145, 0.60);

  /* ── Elevation — the light recipes are navy-inked (rgba(12,24,56,…)), which
     is invisible against a dark backdrop. Re-value to black-based layers
     (same vocabulary as the tooltip / locale-menu dark shadows) so every
     --shadow-* consumer (cards, covers, toasts, skip-links, quick-tile
     hover) actually casts in dark. ─────────────────────────────────── */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.40);
  --shadow-2: 0 2px 6px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.30);
  --shadow-3: 0 6px 16px rgba(0, 0, 0, 0.45), 0 2px 4px rgba(0, 0, 0, 0.30);
}
}  /* end @layer theme (core dark token remap) */

/* ── Field component tokens — dark re-value (notes/architecture.md @layer theme).
   These replace the old higher-specificity `body[data-theme="dark"] .field …`
   blanket that used to live below: the rest surface drops to the darker "well"
   (color-bg-subtle), the disabled well sinks to color-bg-page + a dashed border,
   and the select-trigger pressed tint swaps the light primary-100 for a neutral
   translucent white. Light defaults live in colors_and_type.css @layer tokens.
   Token VALUES resolve by inheritance regardless of layer, so the field RULES in
   each card can stay unlayered (they must — see the colors_and_type.css note on
   the unlayered global focus ring). ──────────────────────────────────────────── */
@layer theme {
  [data-theme="dark"] {
    /* RAISED SURFACE \u2014 dark re-value of the light --color-bg-raised default
       (colors_and_type.css @layer tokens). Sinks the raised controls/panels to
       the darker "well" tone so they stay distinct from the dark card/page they
       rest on. This single re-value REPLACES the old higher-specificity
       `body[data-theme="dark"] .{filter-pill,view-switch,pag button,related a,
       quick-tile,lib-card,filter-group,notice} { background: color-bg-subtle }`
       blanket that used to live below. */
    --color-bg-raised:         var(--color-bg-subtle);

    --field-bg:                var(--color-bg-subtle);
    --field-disabled-bg:       var(--color-bg-page);
    --field-disabled-bd-style: dashed; /* @kind other */
    --field-pressed-bg:        rgba(255,255,255,0.07);

    /* Theme switch (.tsw / .tsw3) \u2014 dark re-value (replaces the old
       `body[data-theme="dark"] .tsw\u2026` blanket below). Puck colours are LITERALS
       (not gov-scale) so they don't follow neutral-900's inversion. */
    --tsw-bg:          var(--color-bg-muted);
    --tsw-bd:          var(--color-border-strong);
    --tsw-puck-light:  #e6ebf2;
    --tsw-puck-dark:   #1a2030;
    --tsw-thumb-shadow: 0 1px 2px rgba(0,0,0,0.45);
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   Preview-card chrome overrides.
   The base in _card.css uses `var(--gov-color-neutral-0)` so the card
   bg already flips — but per-card <style> blocks tend to use raw
   `white`, raw hex values, and raw rgba. The rules below blanket-cover
   the common literals each preview reuses.
   ───────────────────────────────────────────────────────────────────── */

body[data-theme="dark"] { background: var(--color-bg-surface); color: var(--color-fg-default); }

/* Interactive surfaces hard-coded to `background: white` — MIGRATED (Jun 2026).
   `.filter-pill`, `.view-switch`, `.pag button`, `.related a`, `.quick-tile`,
   `.lib-card`, `.filter-group` and `.notice` (base) now route their rest surface
   through the shared --color-bg-raised token (white light → color-bg-subtle dark,
   re-valued in @layer theme above), so the old blanket + the `.filter-pill` dark
   hover re-assertion are GONE — their unlayered hover/active/variant rules (all on
   flip-on-their-own gov-scale tokens) now win normally in both themes. Each
   consumer was converted in lockstep (preview cards + the prototype's ui-kit.css).
   Do NOT re-add a `.x { background: color-bg-subtle }` dark blanket here. */

/* Disabled — preview `.field--disabled` is now token-driven: --field-disabled-bg
   sinks the well to color-bg-page in dark and --field-disabled-bd-style swaps the
   border to dashed (a non-colour locked signal); the dim text/icon ride
   --color-fg-tertiary, which flips on its own. So the old higher-specificity
   `body[data-theme="dark"] .field--disabled …` re-assertion (bg + dashed border +
   tertiary inner) is gone — the cards' own unlayered rules now win in both themes.
   See colors_and_type.css @layer tokens + this file's @layer theme. */

/* Notices — MIGRATED. Base `.notice` rides --color-bg-raised; the variant tints
   (`.notice--info/warning/success/error { background: *-50 }`, unlayered, win by
   later source order at equal specificity) ride gov-scale *-50 tokens that flip on
   their own — so the old dark tint re-assertions are gone. */

/* Doc-type chips — brighter text on a tinted bg, mirrors ui-kit dark.
   Fills are OPAQUE (pre-blended ≈22% tint over the #1a2030 surface) rather than
   translucent rgba — a see-through fill picks up whatever sits behind it
   (cover-card gradient bodies, hover tints), which reads as a faint gradient on
   the chip. Opaque = guaranteed flat. */
body[data-theme="dark"] .dc-chip--cos,
body[data-theme="dark"] .chip--cos     { background: #253751;  color: #98c0e8; }
body[data-theme="dark"] .dc-chip--stanag,
body[data-theme="dark"] .chip--stanag  { background: #333a49; color: #cdd4dc; }
body[data-theme="dark"] .dc-chip--stanrec,
body[data-theme="dark"] .chip--stanrec { background: #363651; color: #c8b9e0; }
body[data-theme="dark"] .dc-chip--ap,
body[data-theme="dark"] .chip--ap      { background: #293d46;  color: #a8d2c4; }

/* Filled doc-chip — ACTIVE (selected) state. Dark only: the muted dark tints
   need an outline to read as selected, whereas the light-mode fills are already
   vivid enough, so no border is added there. Border inks = the outlined-variant
   dark colors. Inset box-shadow (not a real border) keeps the box size identical
   to the resting filled chip. Scoped to the filled treatment only — outlined /
   letter already carry their own chrome. */
body[data-theme="dark"] .dc-chip--active:not(.dc-chip--outlined):not(.dc-chip--letter).dc-chip--cos     { box-shadow: inset 0 0 0 1px #98c0e8; }
body[data-theme="dark"] .dc-chip--active:not(.dc-chip--outlined):not(.dc-chip--letter).dc-chip--stanag  { box-shadow: inset 0 0 0 1px #cdd4dc; }
body[data-theme="dark"] .dc-chip--active:not(.dc-chip--outlined):not(.dc-chip--letter).dc-chip--stanrec { box-shadow: inset 0 0 0 1px #c8b9e0; }
body[data-theme="dark"] .dc-chip--active:not(.dc-chip--outlined):not(.dc-chip--letter).dc-chip--ap      { box-shadow: inset 0 0 0 1px #a8d2c4; }

/* Doc-type chip — alternative treatments (outlined / letter). The filled rule
   above tints the chip background; these override it back to transparent and
   recolor the border / text / dot with the brighter dark inks. Compound
   selectors (0,4,0) beat the filled (0,3,0) rule; placed after for the bg tie. */
body[data-theme="dark"] .dc-chip--outlined,
body[data-theme="dark"] .dc-chip--letter            { background: transparent; }
body[data-theme="dark"] .dc-chip--outlined.dc-chip--cos     { color: #98c0e8; border-color: #98c0e8; }
body[data-theme="dark"] .dc-chip--outlined.dc-chip--stanag  { color: #cdd4dc; border-color: #cdd4dc; }
body[data-theme="dark"] .dc-chip--outlined.dc-chip--stanrec { color: #c8b9e0; border-color: #c8b9e0; }
body[data-theme="dark"] .dc-chip--outlined.dc-chip--ap      { color: #a8d2c4; border-color: #a8d2c4; }
body[data-theme="dark"] .dc-chip--letter.dc-chip--cos       { color: #98c0e8; }
body[data-theme="dark"] .dc-chip--letter.dc-chip--cos     .dc-chip__dot { background: #98c0e8; }
body[data-theme="dark"] .dc-chip--letter.dc-chip--stanag    { color: #cdd4dc; }
body[data-theme="dark"] .dc-chip--letter.dc-chip--stanag  .dc-chip__dot { background: #cdd4dc; }
body[data-theme="dark"] .dc-chip--letter.dc-chip--stanrec   { color: #c8b9e0; }
body[data-theme="dark"] .dc-chip--letter.dc-chip--stanrec .dc-chip__dot { background: #c8b9e0; }
body[data-theme="dark"] .dc-chip--letter.dc-chip--ap        { color: #a8d2c4; }
body[data-theme="dark"] .dc-chip--letter.dc-chip--ap      .dc-chip__dot { background: #a8d2c4; }

/* Buttons — MOVED. The button component is now self-contained in _buttons.css
   (its @layer tokens / @layer theme / @layer components blocks). Dark mode is a
   token re-value there, not a per-variant mirror here — which is what closed the
   secondary/ghost/danger pressed-in-dark gaps. Do NOT re-add `.btn--*` dark
   rules in this file. (The prototype's `.nav-actions .btn` overrides below are a
   separate app-chrome concern and stay.) See notes/architecture.md. */

/* Pagination / toolbar / view switch — MIGRATED. `.pag button.active` rides
   primary-500 (flips); the in-flight suppression `.pag.is-sliding button.active`
   rides --color-bg-raised + border/fg tokens (all flip) and, with the old dark
   `.pag button.active` override removed, beats the active rule on specificity
   (0,3,1 > 0,2,1) in both themes — so no dark re-pin is needed. `.view-switch`
   buttons ride fg-secondary / neutral-50 hover / primary-50 active (all flip).
   No dark `.pag` / `.view-switch` rules belong here. */

/* Tables — MIGRATED to comp-table.html's own tokens. `.tbl-wrap` rides
   --color-bg-surface, `.tbl thead th` rides --color-bg-subtle (= neutral-50 in
   light / #14192a in dark), the zebra even-row + outlined-chip fill are
   co-located --tbl-* tokens. (The old blanket dark even-row tint on ALL stripes
   was dropped — it over-reached onto lines/bare; zebra now flips via its token.)
   See notes/architecture.md. */

/* Toast — uses surface tokens directly, so no override needed. The
   border picks up --color-border-default which already reads cleanly
   on the dark surface. */

/* ─────────────────────────────────────────────────────────────────────────
   Site-header / footer / product wordmark (used in brand previews).
   The light-mode designs rely on `--gov-color-neutral-900` literally
   meaning "near-black navy" (deep footer fill, top gov.cz bar). In dark
   mode that token inverts to a near-white, so we have to pin a fixed
   dark colour here instead of riding the token.
   ───────────────────────────────────────────────────────────────────── */

/* Header — brand-header.html uses `.hdr` (whole frame) + `.bar` (top strip) */
body[data-theme="dark"] .hdr         { background: var(--color-bg-surface); border-color: var(--color-border-default); }
body[data-theme="dark"] .bar         { background: #050810; color: white; }
body[data-theme="dark"] .bar a       { color: white; }
body[data-theme="dark"] .lockup .name { color: var(--color-fg-default); }
body[data-theme="dark"] .lockup .inst { color: var(--color-fg-secondary); }

/* Footer — brand-footer.html uses `.ftr` (whole frame) */
body[data-theme="dark"] .ftr         { background: #050810; color: rgba(255,255,255,0.85); }
body[data-theme="dark"] .ftr a       { color: rgba(255,255,255,0.85); }
body[data-theme="dark"] .ftr a:hover { color: white; }
body[data-theme="dark"] .footer-col h4 { color: white; }
body[data-theme="dark"] .footer-brand .tile { background: white; color: var(--jvs-modra); }
body[data-theme="dark"] .footer-brand .nm   { color: white; }
body[data-theme="dark"] .footer-bottom      { border-top-color: rgba(255,255,255,0.1); }

/* Product wordmark — brand-wordmark.html */
body[data-theme="dark"] .wm__name           { color: var(--color-fg-default); }
body[data-theme="dark"] .wm--inv .wm__tile  { background: white; border-color: rgba(255,255,255,0.15); color: var(--jvs-modra); }

/* Header tabs / nav */
body[data-theme="dark"] .nav a       { color: var(--color-fg-default); }
body[data-theme="dark"] .nav a.active{ color: var(--gov-color-primary-500); }
body[data-theme="dark"] .nav a:hover { background: var(--gov-color-primary-50); }
body[data-theme="dark"] .nav-actions .btn { background: var(--color-bg-surface); color: var(--gov-color-primary-500); border-color: var(--gov-color-primary-500); }
body[data-theme="dark"] .nav-actions .btn--ghost { background: transparent; border-color: transparent; }
body[data-theme="dark"] .nav        { border-top-color: var(--color-border-default); }

/* Locale combo (sits on dark .bar — already dark, just needs the menu
   surface remapped to read on the inverted card). */
body[data-theme="dark"] .locale__menu { background: var(--color-bg-surface); border-color: var(--color-border-strong); box-shadow: 0 6px 16px rgba(0,0,0,0.45), 0 2px 4px rgba(0,0,0,0.30); }
body[data-theme="dark"] .locale__opt  { color: var(--color-fg-default); }
body[data-theme="dark"] .locale__opt[aria-selected="true"] { background: var(--color-bg-muted); }
body[data-theme="dark"] .locale__opt:hover { background: var(--gov-color-primary-50); color: var(--gov-color-primary-700); }
body[data-theme="dark"] .locale__opt .lang { color: var(--color-fg-tertiary); }
body[data-theme="dark"] .locale[aria-expanded="true"] .locale__btn { background: var(--color-bg-surface); color: var(--color-fg-default); border-color: var(--color-border-strong); }

/* Theme switch (.tsw / .tsw3) — MIGRATED to the shared --tsw-* token contract
   (colors_and_type.css @layer tokens + this file's @layer theme above). Track
   (--tsw-bg/--tsw-bd) and puck (--tsw-puck-light/--tsw-puck-dark + --tsw-thumb-
   shadow) flip on their own, so comp-switch.html, brand-header.html and the
   prototype (ui-kit.css general .tsw + the always-dark .bar override) all read
   correctly in both themes with no per-selector dark rules here. Hover rides
   neutral-200/border-strong directly (both flip). */

/* comp-switch.html — demo cluster surface */
body[data-theme="dark"] .demo-cluster { background: var(--color-bg-subtle); }

/* CSS-painted swatches used in colors-*.html keep their hard-coded hex
   on purpose — those are the palette swatches and should NOT recolor.
   But the surrounding card chrome (.swatch border) needs to be softened. */
body[data-theme="dark"] .swatch { border-color: rgba(255,255,255,0.10); }

/* ─────────────────────────────────────────────────────────────────────────
   Per-card surface rescues.

   Same root cause as the header/footer patch above: per-card <style>
   blocks set `background: white;` directly instead of going through
   `var(--color-bg-surface)`, so dark mode leaves a blinding white tile
   under near-white text. The rules below flip every such surface to the
   dark card token. If you add a new preview card with a raw `background:
   white` rule, register the selector here too.
   ───────────────────────────────────────────────────────────────────── */

/* type-specimen.html — variant comparison, glyph diagnostic, glyph boxes */
body[data-theme="dark"] .var,
body[data-theme="dark"] .diag,
body[data-theme="dark"] .diag__cell,
body[data-theme="dark"] .gbox {
  background: var(--color-bg-subtle);
}
/* The right-hand .var + .var (logotype variant) uses neutral-50 which
   already inverts, but it ends up matching .var exactly — give it a
   touch of separation so the two columns still read as distinct. */
body[data-theme="dark"] .var + .var { background: var(--color-bg-muted); }

/* type-specimen.html — logotype variant toggle pill */
body[data-theme="dark"] .var__toggle {
  background: var(--color-bg-page);
  border-color: var(--color-border-strong);
}
body[data-theme="dark"] .var__toggle button {
  color: var(--color-fg-secondary);
}
body[data-theme="dark"] .var__toggle button[aria-pressed="true"] {
  background: var(--color-fg-default);
  color: var(--color-bg-page);
}

/* type-specimen.html — preview-size slider header */
body[data-theme="dark"] .specimen__head {
  background: var(--color-bg-subtle);
}

/* comp-doc-card.html — MIGRATED. Card + outlined-mini-button surfaces now ride
   the co-located --dc-surface token (white → color-bg-subtle) in the card's own
   <style>; .dc text + .btn-mini--out colour ride tokens that flip on the element.
   No doc-card dark rules belong here. See notes/architecture.md. */

/* ── comp-cover-card.html — MIGRATED to the token model. The card is now
   self-contained in its own <style> (@layer tokens / @layer theme / @layer
   components). Dark mode is token revalues co-located there (--cv-tint 4%→13%,
   --cv-frost-* light→dark); paper/footer surfaces ride --gov-color-neutral-0
   which flips. No .cv dark rules belong in this file anymore. See
   notes/architecture.md. */

/* comp-status.html — PENDING step dots get the well surface in dark. The circle
   is now a child `.dot__bg` (so the opening animation can scale it without
   snapping the glyph); the active/done/rejected fills live on `.dot__bg` too. */
body[data-theme="dark"] .step.pending .dot__bg { background: var(--color-bg-subtle); }

/* comp-list-toolbar.html — toolbar shell + inputs */
body[data-theme="dark"] .tbar-wrap { background: var(--color-bg-surface); }

/* comp-table.html — MIGRATED (see Tables note above). No table dark rules here. */

/* colors-semantic.html — the hex strip was replaced by the token-driven
   `.hexcode` chip (rides surface/border tokens), so no dark rescue is needed. */

/* comp-inputs.html — the preview `.field` surface is now token-driven
   (--field-bg flips to color-bg-subtle in @layer theme above), so the old
   belt-and-braces `body[data-theme="dark"] .field { background: … }` rescue is
   gone. */

/* brand-header.html — header frame itself (already covered as .hdr above) */

/* space-shadows.html — the elevation tiles now ride surface/border tokens on a
   bg-subtle "well", and --shadow-1/2/3 have black-based dark re-values above —
   so no per-card rescue is needed anymore (the old "tiles must stay light"
   rule predates the dark shadow tokens). */

/* brand-lev.html — these tiles are *intentionally* white/black/white,
   they are the brand-color treatments of the Lev mark; do not flip. */

/* Tooltip — the chip itself inverts via tokens (--color-fg-default surface
   / --color-bg-surface text) so it flips automatically; only the navy
   drop-shadow ink is invisible on a dark page. Swap to a black ambient
   shadow + hairline so the (now near-white) chip reads as elevated. */
body[data-theme="dark"] .tip {
  box-shadow: 0 6px 22px rgba(0,0,0,0.55), 0 0 0 1px rgba(0,0,0,0.4);
}
