/* Dark scheme for the Signal design.
 *
 * Loaded after wl.css and kept in its own file for one reason: wl-tokens.css and wl.css are
 * verbatim copies of the panel's, and this engine must not fork them. Everything dark lives here
 * instead, so re-copying the panel's two files stays a straight overwrite. When the panel grows its
 * own dark scheme, this file is what gets reconciled and probably deleted.
 *
 * Two halves:
 *   1. the token block, which does most of the work because nothing in wl.css hardcodes a colour;
 *   2. the handful of rules that DO hardcode #fff because they sit on a `var(--wl-text)` fill.
 *      In light, --wl-text is near-black and white ink is right. In dark it is near-white, so those
 *      rules would paint white on white; each is re-inked below rather than patched in the copies.
 *
 * Applied only under [data-theme="dark"]: this engine has an explicit two-way switch, not a system
 * setting, and base.html stamps the attribute before first paint so there is no flash.
 */

:root[data-theme="dark"] {
  /* Ground, panels, surfaces: each step inward gets lighter, the same order as the light scheme. */
  --wl-frame: #08090a;
  --wl-rail-bg: #121316;
  --wl-bg: #0e0f11;
  --wl-surface: #16181b;
  --wl-surface-2: #1d2024;
  --wl-border: #24272c;
  --wl-border-strong: #343941;

  /* Ink. Not pure white: #f4f5f7 on #16181b is ~14:1, which is legible without glare. */
  --wl-text: #f4f5f7;
  --wl-text-2: #a7aeb9;
  --wl-text-3: #767d88;

  /* The accent lifts, because #2563eb on a dark ground is too dense to read as a link. */
  --wl-accent: #60a5fa;
  --wl-accent-ink: #93c5fd;
  --wl-accent-fg: #08090a;
  --wl-accent-soft: rgba(96, 165, 250, .16);

  /* The active nav pill is white with black text: the light scheme's black pill has nowhere to go. */
  --wl-nav-active-bg: #f4f5f7;
  --wl-nav-active-fg: #0b0c0e;

  /* Semantic tones brighten and their soft fills become low-alpha washes rather than pastels,
     which would glow on a dark ground. */
  --wl-ok: #4ade80;     --wl-ok-soft: rgba(74, 222, 128, .15);
  --wl-warn: #fbbf24;   --wl-warn-soft: rgba(251, 191, 36, .15);
  --wl-danger: #f87171; --wl-danger-soft: rgba(248, 113, 113, .15);
  --wl-data-2: #f472b6;
  --wl-data-3: #2dd4bf;
  --wl-data-4: #fbbf24;
  --wl-data-5: #a78bfa;

  /* Shadows do less on a dark ground; borders do the separating instead. */
  --wl-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px -12px rgba(0, 0, 0, .6);
  --wl-shadow-hover: 0 2px 4px rgba(0, 0, 0, .45), 0 14px 32px -14px rgba(0, 0, 0, .7);
  --wl-focus: 0 0 0 3px rgba(96, 165, 250, .4);

  --wl-fill-a: repeating-linear-gradient(-45deg, var(--wl-accent) 0 2px, rgba(96, 165, 250, .25) 2px 6px);
  --wl-fill-2: repeating-linear-gradient(-45deg, var(--wl-data-2) 0 2px, rgba(244, 114, 182, .25) 2px 6px);
}

/* ── Re-inking: everything that sits on a var(--wl-text) fill ─────────────── */
:root[data-theme="dark"] .wl-btn.primary,
:root[data-theme="dark"] .wl-seg button[aria-pressed="true"],
:root[data-theme="dark"] .wl-pill.dark,
:root[data-theme="dark"] .wl-brand-mark,
:root[data-theme="dark"] .wl-nav-row .wl-badge,
:root[data-theme="dark"] .wl-step .n.now,
:root[data-theme="dark"] .wl-list button[aria-current="true"],
:root[data-theme="dark"] .wl-tip,
:root[data-theme="dark"] .e-stage.is-now .dot,
:root[data-theme="dark"] .ce-step.active .ce-step-num,
:root[data-theme="dark"] .ce-tab.active,
:root[data-theme="dark"] .ce-btn-primary,
:root[data-theme="dark"] .ce-ctrl-btn.primary,
:root[data-theme="dark"] .eng-navrow.active,
:root[data-theme="dark"] .ce-kw-row.is-on .ce-kw-toggle,
:root[data-theme="dark"] .wf-row.is-active { color: #0b0c0e; }

:root[data-theme="dark"] .wl-btn.primary:hover:not(:disabled),
:root[data-theme="dark"] .ce-btn-primary:hover:not(:disabled),
:root[data-theme="dark"] .ce-ctrl-btn.primary:hover:not(:disabled) { background: #ffffff; box-shadow: none; }

/* The promo block and the toast invert the same way. */
:root[data-theme="dark"] .wl-promo { background: var(--wl-surface-2); color: var(--wl-text); border: 1px solid var(--wl-border); }
:root[data-theme="dark"] .wl-promo p { opacity: .8; }
:root[data-theme="dark"] .wl-promo .wl-btn { background: var(--wl-text); color: #0b0c0e; border-color: var(--wl-text); }
:root[data-theme="dark"] .wl-toast { color: #0b0c0e; }
:root[data-theme="dark"] .wl-toast-success,
:root[data-theme="dark"] .wl-toast-error { color: #0b0c0e; }

/* Hover fill on nav rows is a black wash in light; on a dark ground it has to be white. Excluding
   the active row matters: this selector is more specific than [aria-current="page"], so without the
   :not() a hover replaced the active row's solid pill with a faint wash and it read as unselecting
   itself. In light the same pair only works because the aria-current rule comes later in the file. */
:root[data-theme="dark"] .wl-nav-row:not([aria-current="page"]):hover { background: rgba(255, 255, 255, .06); }
:root[data-theme="dark"] .e-logo { background: var(--wl-surface-2); }

/* Anything sitting ON the active pill. In light that pill is black, so its sub-text and badge are
   white; in dark the pill is white and the same white becomes invisible. Same for the two other
   inverted rows: the generate sidebar and the wireframe list. */
:root[data-theme="dark"] .wl-nav-row[aria-current="page"] .wl-blurb { color: rgba(11, 12, 14, .6); }
:root[data-theme="dark"] .wl-nav-row[aria-current="page"] .wl-badge { background: rgba(11, 12, 14, .16); color: #0b0c0e; }
:root[data-theme="dark"] .wl-nav-row[aria-current="page"] .wl-ic { color: #0b0c0e; }
:root[data-theme="dark"] .eng-navrow.active .eng-row-type { color: rgba(11, 12, 14, .65); }
:root[data-theme="dark"] .wf-row.is-active small { color: rgba(11, 12, 14, .65); }
:root[data-theme="dark"] .wf-row.is-active .wl-pill { background: rgba(11, 12, 14, .14); color: #0b0c0e; }

/* The three coloured banners put a white disc behind their icon, which glares on a dark card. */
:root[data-theme="dark"] .ce-banner.info .ce-banner-icon,
:root[data-theme="dark"] .ce-banner.success .ce-banner-icon,
:root[data-theme="dark"] .ce-banner.warn .ce-banner-icon { background: rgba(0, 0, 0, .28); }

/* A disabled primary button keeps the light hover fill, which lands black-on-black in dark. */
:root[data-theme="dark"] .wl-btn.primary:disabled:hover { background: var(--wl-text); }

/* The insight card's gradient is built for a light page; deepen it so text stays legible. */
:root[data-theme="dark"] .wl-insight { background: linear-gradient(135deg, #10203f 0%, #1d4ed8 65%, #2563eb 100%); }
:root[data-theme="dark"] .wl-insight .wl-btn { background: var(--wl-text); color: #0b0c0e; border-color: var(--wl-text); }

/* The settings MCP strip is a dark slab already; on a dark page it needs an edge to read as one. */
:root[data-theme="dark"] .st-endpoint { background: var(--wl-surface-2); border: 1px solid var(--wl-border); }
:root[data-theme="dark"] .st-opt.is-on .dot::after { background: var(--wl-text); }

/* The generated-page preview is a real website in an iframe and is authored light. Keep a white
   sheet behind it rather than letting a dark page show through a transparent body. */
:root[data-theme="dark"] .preview-frame,
:root[data-theme="dark"] .wl-mock { background: #ffffff; }

/* Skeletons: the light shimmer is invisible on a dark ground. */
:root[data-theme="dark"] .wl-skel { background: linear-gradient(90deg, var(--wl-surface-2) 25%, #2b2f35 50%, var(--wl-surface-2) 75%); background-size: 200% 100%; }

/* Form controls and scrollbars follow the scheme instead of staying light. */
:root[data-theme="dark"] { color-scheme: dark; }
:root[data-theme="dark"] .wl-input:focus { border-color: var(--wl-text-2); }

/* Sheets green holds on a dark ground; the quiet variant needs a lighter ink to stay readable. */
:root[data-theme="dark"] .ce-sheet-btn-quiet,
:root[data-theme="dark"] .ce-ctrl-btn.ce-sheet-btn-quiet,
:root[data-theme="dark"] .wl-btn.ce-sheet-btn-quiet {
    background: rgba(52, 168, 83, .16); border-color: rgba(52, 168, 83, .4); color: #6ee7a0;
}
/* The filled green keeps its white ink in dark, so it must not pick up the black used by every
   other primary here. */
:root[data-theme="dark"] .ce-sheet-btn,
:root[data-theme="dark"] .ce-ctrl-btn.ce-sheet-btn,
:root[data-theme="dark"] .wl-btn.ce-sheet-btn { background: #0f9d58; border-color: #0f9d58; color: #fff; }