/**
 * UmbraDNS compatibility layer — maps legacy portal CSS variables to Umbra tokens.
 * Loaded after inline styles in index.html so aliases override legacy :root defaults.
 */

:root,
[data-theme="dark"] {
  --bg: var(--canvas);
  --bg-2: var(--surface-elevated);
  --surface-2: var(--surface-elevated);
  --elev: var(--surface-elevated);
  --surface-1: var(--surface);

  --text: var(--text-primary);
  --text-2: var(--text-secondary);
  --muted: var(--text-muted);

  --border: var(--border-subtle);
  --border-strong: var(--border-strong-umbra);
  --border-default: var(--border-default);

  --accent: var(--umbra-800);
  --accent-2: var(--umbra-600);
  --accent-rgb: 73, 38, 130;
  --accent-dim: rgba(73, 38, 130, 0.14);
  --accent-ink: #ffffff;

  --crit: var(--status-danger);
  --crit-dim: var(--status-danger-dim);
  --warn: var(--status-warning);
  --warn-dim: var(--status-warning-dim);
  --block: var(--policy-block);
  --block-dim: var(--policy-block-dim);
  --info: var(--status-info);
  --info-dim: var(--status-info-dim);
  --ok: var(--status-success);

  --radius: var(--radius-lg);
  --radius-sm: var(--radius-md);

  --shadow: var(--shadow-md);
  --glow: 0 0 24px rgba(73, 38, 130, 0.12);
  --chart-grid: var(--chart-grid-umbra);
  --chart-cross: rgba(73, 38, 130, 0.35);
  --track: rgba(255, 255, 255, 0.08);
  --chart-rank-track: rgba(255, 255, 255, 0.045);
  --chart-rank-fill-1: linear-gradient(90deg, rgba(73, 38, 130, 0.95), rgba(105, 91, 163, 0.75));
  --chart-rank-fill-2: linear-gradient(90deg, rgba(73, 38, 130, 0.82), rgba(105, 91, 163, 0.6));
  --chart-rank-fill-3: linear-gradient(90deg, rgba(73, 38, 130, 0.52), rgba(105, 91, 163, 0.38));
  --chart-rank-fill-parts: linear-gradient(90deg, rgba(73, 38, 130, 0.88), rgba(105, 91, 163, 0.68));
  --chart-rank-hover-bg: var(--surface-elevated);
  --chart-rank-hover-border: rgba(73, 38, 130, 0.22);
  --chart-rank-icon-bg: rgba(73, 38, 130, 0.1);
  --chart-rank-icon-border: rgba(73, 38, 130, 0.18);
}

/* Light theme: semantic tokens from umbra-tokens.css; legacy aliases only */
[data-theme="light"] {
  --bg: var(--canvas);
  --bg-2: var(--surface-elevated);
  --surface-2: var(--surface-elevated);
  --elev: var(--surface-elevated);
  --surface-1: var(--surface);

  --text: var(--text-primary);
  --text-2: var(--text-secondary);
  --muted: var(--text-muted);

  --border: var(--border-subtle);
  --border-strong: var(--border-strong-umbra);
  --border-default: var(--border-default);

  --accent-dim: rgba(73, 38, 130, 0.1);
  --accent-ink: var(--text-on-accent);
  --shadow: var(--shadow-md);
  --chart-grid: var(--chart-grid-umbra);
  --chart-cross: rgba(73, 38, 130, 0.35);
  --track: rgba(37, 28, 68, 0.1);
  --chart-rank-track: rgba(73, 38, 130, 0.14);
  --chart-rank-fill-1: var(--umbra-800);
  --chart-rank-fill-2: #5c3d96;
  --chart-rank-fill-3: #9886be;
  --chart-rank-fill-parts: linear-gradient(90deg, var(--umbra-800), var(--umbra-600));
  --chart-rank-hover-bg: rgba(73, 38, 130, 0.06);
  --chart-rank-hover-border: rgba(73, 38, 130, 0.2);
  --chart-rank-icon-bg: rgba(73, 38, 130, 0.08);
  --chart-rank-icon-border: rgba(73, 38, 130, 0.16);
}

html,
body {
  font-family: var(--font-family-base);
}