/**
 * Tokens only the builder page applies (consolidation C-48). Linked by index.html alone, right
 * after tokens.css, so its rules keep the place they had at the end of tokens.css. The admin,
 * client and review shells never apply `.pb-dark` (no module they load adds it), so they no longer
 * pay for it. Holds the dark register; sys-dark-closure.mjs generates its closure block.
 */

/* ═══════════════════════════════════════════════════════════════════════════
   Dark register (Polish 2 CK-5)
   ═══════════════════════════════════════════════════════════════════════════

   An OPT-IN, SUBTREE-SCOPED override — not a theme switch. Adding `pb-dark` to
   any element re-points the semantic tokens for that subtree; the builder shell
   stays light because nothing in it carries the class.

   Why this exists: three parallel token namespaces were forked because there
   was no dark register to reach for — `--si-*` and `--pk-*` in auth-screen.css
   and `--pb-tour-*` in tour.css, each with hand-copied colour values that can
   only drift apart. The values below are lifted verbatim from the auth screen's
   already-shipped dark palette, so adopting this register is a rename for those
   sheets rather than a re-design (that migration is CK-6, not this phase).

   Whole-app dark mode is deliberately NOT wired here. When it is wanted it
   becomes one line — put `pb-dark` on <html> — plus a user-facing toggle.
   Deriving it from `@media (prefers-color-scheme: dark)` instead would force
   every dark value to be written twice (once in the media block, once in the
   class) with no preprocessor to keep them in step, which is precisely the
   duplication this register exists to end.

   ONLY semantic tokens belong here. Scales that carry no colour — spacing,
   typography, radius, z-index, timing — are register-independent and must stay
   in :root. design-tokens-tests.js asserts that this block defines a subset of
   the base register and never introduces a name :root does not have. */

.pb-dark {
  /* Surfaces + text */
  --pb-bg: #0a0b0d;
  --pb-surface: #131519;
  --pb-surface-2: #171a1f;
  --pb-surface-3: #1e222a;
  --pb-surface-hover: rgba(255, 255, 255, 0.06);
  --pb-bg-elevated: #171a1f;
  --pb-bg-hover: rgba(255, 255, 255, 0.07);
  --pb-hover: var(--pb-bg-hover);
  --pb-text: #e7e9ee;
  --pb-text-bright: #f6f7f9;
  --pb-text-dim: #9aa1ad;
  --pb-text-faint: #676e7a;

  /* Borders — alpha-based so they read against any surface in the subtree */
  --pb-border: rgba(255, 255, 255, 0.09);
  --pb-border-soft: rgba(255, 255, 255, 0.09);
  --pb-border-strong: rgba(255, 255, 255, 0.18);

  /* Form fields (see the :root note — the two registers disagree about how a
     focused field relates to a resting one, so both values are explicit) */
  --pb-field-bg: rgba(255, 255, 255, 0.04);
  --pb-field-bg-focus: rgba(255, 255, 255, 0.07);

  /* Accent, lifted for dark: #0078d4 is too low-contrast on #0a0b0d */
  --pb-accent: #2f9bff;
  --pb-accent-hover: #57b0ff;
  --pb-on-accent: #051422;
  --pb-accent-glow: rgba(47, 155, 255, 0.22);
  --pb-accent-tint: rgba(47, 155, 255, 0.1);

  /* Semantic status — brightened so they clear AA on a near-black surface.
     The -bg/-border tints are alpha over the surface, so they carry across
     unchanged; only the solid text/icon colours need lifting. */
  --pb-danger: #f87171;
  --pb-danger-rgb: 248, 113, 113;
  --pb-danger-hover: #fca5a5;
  --pb-danger-text: #fca5a5;
  --pb-success: #4ade80;
  --pb-success-text: #6ee7b7;
  --pb-warning: #fbbf24;
  --pb-warning-icon: #fcd34d;
  --pb-warning-text: #fcd34d;

  /* Chrome surfaces that hard-code light translucency in :root */
  --pb-toolbar-bg: rgba(19, 21, 25, 0.78);
  --pb-chip-bg: rgba(255, 255, 255, 0.06);
  --pb-chip-bg-hover: rgba(255, 255, 255, 0.12);
  --pb-segmented-track: rgba(255, 255, 255, 0.07);
  --pb-segmented-thumb: rgba(255, 255, 255, 0.16);
  /* Checkerboard — the dark register's version of "a surface that is
     visibly NOT the panel behind it". #c7d0dc here would be a light-blue
     card in a near-black panel, which is what two of the four donors did. */
  --pb-checker-base: #2a2f38;
  --pb-checker-base-hover: #333944;
  --pb-checker-tint: rgba(255, 255, 255, 0.09);
  --pb-scrollbar-hover: #6b7280;
  --pb-overlay-bg: rgba(0, 0, 0, 0.6);

  /* Shadows read as depth on light and as nothing on dark — deepen them */
  --pb-shadow-panel: 0 4px 24px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.4);
  --pb-shadow-dropdown: 0 8px 24px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.4);
  --pb-shadow-popover: 0 8px 24px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.4);
  --pb-shadow-modal: 0 12px 36px rgba(0, 0, 0, 0.65);


  /* sys-dark-closure: generated, do not edit */
  --pb-text-dimmer: color-mix(in srgb, var(--pb-text-dim) 80%, transparent);
  --pb-fr-error-shadow: 0 0 0 3px var(--pb-danger-glow);
  --pb-accent-subtle: color-mix(in srgb, var(--pb-accent) 55%, var(--pb-text-dim));
  --pb-input-error-bg: rgba(var(--pb-danger-rgb), 0.08);
  --pb-success-bg: color-mix(in srgb, var(--pb-success) 12%, transparent);
  --pb-success-border: color-mix(in srgb, var(--pb-success) 40%, transparent);
  --pb-warning-bg: color-mix(in srgb, var(--pb-warning) 12%, transparent);
  --pb-warning-border: color-mix(in srgb, var(--pb-warning) 40%, transparent);
  --pb-danger-bg: rgba(var(--pb-danger-rgb), 0.14);
  --pb-danger-glow: rgba(var(--pb-danger-rgb), 0.18);
  --pb-danger-border: rgba(var(--pb-danger-rgb), 0.4);
  --pb-boot-canvas-shadow: inset 0 0 0 1px var(--pb-border);
  --pb-gp-swatch-active-shadow: inset 0 0 0 2px var(--pb-accent);
  --pb-design-btn-stage-outline: color-mix(in srgb, var(--pb-border) 55%, transparent);
  --pb-spi-dot-shadow-rest: 0 0 0 0 var(--pb-accent-glow);
  --pb-spi-dot-shadow-peak: 0 0 0 5px var(--pb-accent-glow);
  --pb-bg-swatch-shadow-active: inset 0 0 0 1px var(--pb-accent), inset 0 0 0 3px var(--pb-surface), 0 2px 6px rgba(17, 24, 39, 0.08);
  --pb-spi-reset-count-hover-bg: color-mix(in srgb, var(--pb-danger) 14%, var(--pb-surface));
  --pb-spsd-input-invalid-shadow: inset 0 0 0 1px var(--pb-danger);
  --pb-spsd-band-drag-bg: color-mix(in srgb, var(--pb-accent) 18%, var(--pb-surface));
  --pb-spsd-link-pressed-bg: color-mix(in srgb, var(--pb-accent) 14%, var(--pb-surface));
  --pb-spi-svg-insert-hover-bg: color-mix(in srgb, var(--pb-accent) 18%, var(--pb-surface));
  --pb-effect-glow-shadow-peak: 0 0 0 6px var(--pb-accent-glow);
  --pb-drag-ghost-bg: var(--pb-surface);
  --pb-drag-ghost-border: var(--pb-accent);
  --pb-drag-ghost-shadow: 0 4px 16px color-mix(in srgb, var(--pb-accent) 25%, transparent);
  --pb-drop-zone-color: var(--pb-accent);
  --pb-drop-zone-glow: var(--pb-accent-glow);
  --pb-accent-muted: color-mix(in srgb, var(--pb-accent) 8%, transparent);
  --pb-accent-bg: color-mix(in srgb, var(--pb-accent) 12%, transparent);
  --pb-accent-border: color-mix(in srgb, var(--pb-accent) 40%, transparent);
  --pb-focus-ring: 2px solid var(--pb-text-bright);
  --pb-focus-ring-glow: 0 0 0 4px var(--pb-accent-glow);
  --pb-danger-muted: rgba(var(--pb-danger-rgb), 0.12);
  --pb-badge-manual-bg: color-mix(in srgb, var(--pb-accent) 12%, transparent);
  --pb-shadow-ring: 0 0 0 1px var(--pb-accent);
  --pb-ring-accent: 0 0 0 2px var(--pb-accent);
  --pb-ring-glow: 0 0 0 3px var(--pb-accent-glow);
  --pb-shadow-glow: 0 0 0 1px var(--pb-accent), 0 0 6px var(--pb-accent-glow);
  --pb-edit-outline-active: var(--pb-accent);
  --pb-row-bg: var(--pb-surface);
  --pb-row-bg-hover: var(--pb-surface-hover);
  --pb-row-bg-selected: var(--pb-accent-muted);
  --pb-row-bg-active: var(--pb-surface-hover);
  --pb-row-bg-selected-multi: color-mix(in srgb, var(--pb-accent-muted) 55%, var(--pb-surface));
  --pb-row-stripe-multi: 2px dashed var(--pb-accent);
  --pb-spi-row-bg: var(--pb-row-bg);
  --pb-spi-row-bg-hover: var(--pb-row-bg-hover);
  --pb-spi-row-bg-active: var(--pb-row-bg-selected);
  --pb-spi-override-dot: var(--pb-accent);
  --pb-drawer-shadow: var(--pb-shadow-dropdown);
  --pb-menu-surface: var(--pb-bg-elevated);
  --pb-menu-item-color: var(--pb-text);
  --pb-menu-item-hover: var(--pb-bg-hover);
  --pb-menu-item-icon: var(--pb-text-dim);
  --pb-menu-item-danger: var(--pb-danger);
  --pb-menu-item-danger-hover: var(--pb-danger-muted);
  --pb-menu-divider: var(--pb-border);
  --pb-modal-surface: var(--pb-surface);
  --pb-modal-border: var(--pb-border);
  --pb-modal-shadow: var(--pb-shadow-modal);
  --pb-coll-poster-shadow-hover: var(--pb-shadow-panel);
  --pb-seg-border: color-mix(in srgb, var(--pb-border) 72%, transparent);
  --pb-landed-ring: inset 0 0 0 2px var(--pb-accent);
  /* sys-dark-closure: end */
}