/* ============================================================
 * compat.css — token alias shim
 *
 * Maps the legacy `--sl-*` token surface (design system v1) onto
 * the new `--color-*` / `--bg-*` / `--fg-*` tokens defined in
 * `colors_and_type.css` (design system v2).
 *
 * Selector strategy:
 *   `themes/base.css` declares `--sl-*` defaults on `:root`. We need
 *   compat to win when a v2 theme is active. Both `:root` and
 *   `[data-theme="x"]` have the same specificity, and base.css loads
 *   after compat — so plain `:root` here would lose the cascade.
 *
 *   Fix: scope every alias under `html[data-theme="<v2>"]`, which has
 *   specificity 0,0,1,1 (attribute + type) — strictly higher than
 *   `:root`'s 0,0,1,0. v1 themes (lagos / navy-gold / forestry / earth /
 *   daylight / signal) keep working because we don't match them here.
 *
 * Load order (must be):
 *   1. colors_and_type.css   (defines --color-*, [data-theme="<v2>"], [data-mode="dark"])
 *   2. compat.css            (this file — aliases legacy --sl-* tokens for v2 themes)
 *   3. themes/index.css      (v1 themes — still override per [data-theme="<v1>"])
 *
 * Delete this file when `grep -r '--sl-' templates/ static/` is empty.
 * ============================================================ */

html[data-theme="sovereign"],
html[data-theme="gov-green"],
html[data-theme="nrs-afex"],
html[data-theme="cac-lagos"],
html[data-theme="ember"] {

  /* ---------- Surfaces ---------- */
  --sl-canvas: var(--bg-page);
  --sl-paper: var(--bg-card);
  --sl-white: var(--bg-card);
  --sl-warm-bg: var(--bg-warm);
  --sl-sand: var(--bg-warm);
  --sl-sand-soft: var(--bg-muted);
  /* --sl-ink was used for both "dark hero" and "always-dark chrome".
     Map to --chrome-bg so the sidebar + dark surfaces stay dark in BOTH
     light and dark mode (--bg-inverse inverts in dark mode, which would
     flip the sidebar to a light cream background — wrong). */
  --sl-ink: var(--chrome-bg);
  --sl-ink-2: var(--chrome-active);

  /* ---------- Foreground ---------- */
  --sl-fg-1: var(--fg-1);
  --sl-fg-2: var(--fg-2);
  --sl-fg-3: var(--fg-3);

  /* ---------- Brand (primary) ---------- */
  --sl-brand: var(--color-primary);
  --sl-brand-hover: var(--color-primary-hover);
  --sl-brand-press: var(--color-primary-active);
  --sl-brand-soft: var(--color-accent-bg);
  --sl-brand-softer: var(--color-accent-bg);

  /* ---------- Accent ---------- */
  --sl-accent: var(--color-accent);
  --sl-accent-soft: var(--color-accent-bg);
  --sl-accent-press: var(--color-accent-active);

  /* ---------- Borders ---------- */
  --sl-border: var(--border-1);
  --sl-border-strong: var(--border-strong);

  /* ---------- Status ---------- */
  --sl-success: var(--color-success);
  --sl-success-soft: var(--color-success-bg);
  --sl-success-text: var(--color-success-fg);
  --sl-warning: var(--color-warning);
  --sl-warning-soft: var(--color-warning-bg);
  --sl-warning-text: var(--color-warning-fg);
  --sl-danger: var(--color-danger);
  --sl-danger-soft: var(--color-danger-bg);
  --sl-danger-text: var(--color-danger-fg);
  --sl-info: var(--color-info);
  --sl-info-soft: var(--color-info-bg);
  --sl-info-text: var(--color-info-fg);

  /* ---------- Radius ---------- */
  --sl-radius-xs: var(--radius-xs);
  --sl-radius-sm: var(--radius-sm);
  --sl-radius-md: var(--radius-md);
  --sl-radius-lg: var(--radius-lg);
  --sl-radius-xl: var(--radius-xl);
  --sl-radius-2xl: var(--radius-2xl);
  --sl-radius-pill: var(--radius-full);

  /* ---------- Shadows (warm-tinted in v2) ---------- */
  --sl-shadow-xs: var(--shadow-xs);
  --sl-shadow-sm: var(--shadow-sm);
  --sl-shadow-md: var(--shadow-md);
  --sl-shadow-lg: var(--shadow-lg);
  --sl-shadow-xl: var(--shadow-xl);

  /* ---------- Motion ---------- */
  --sl-dur-fast: var(--dur-fast);
  --sl-dur-base: var(--dur);
  --sl-ease: var(--ease-out);
  --sl-ease-out: var(--ease-out);

  /* ---------- Type (IBM Plex from colors_and_type.css) ---------- */
  --sl-font-sans: var(--font-sans);
  --sl-font-display: var(--font-display);
  --sl-font-mono: var(--font-mono);
  --sl-tracking-tight: var(--tracking-tight);
  --sl-leading-normal: 1.5;
  --sl-leading-loose: 1.7;

  /* ---------- Layout ---------- */
  --sl-navbar-height: var(--topbar-h);
  --sl-sidebar-width: var(--sidebar-w);

  /* ---------- Focus ring (theme-aware; used in admin-styles3 focus states) ---------- */
  --sl-focus-ring: var(--ring-focus);
}