/* PRD#admin-ui-cleanup §2.2 — Theme tokens (4-tier elevation dark mode + light toggle) */

:root,
[data-theme="dark"] {
  /* ── Surface elevation (4-tier) ── */
  --bg-base: #0b0f1a;            /* page bg — deepest, slightly warm */
  --bg-panel: #131826;           /* sidebar / nav containers */
  --bg-card: #1a1f2e;            /* cards, modals primary surface */
  --bg-elevated: #232839;        /* hover states, popovers, toast */

  /* ── Borders ── */
  --border-subtle: #232a3d;      /* card outlines, table rows */
  --border-default: #2d3548;     /* input fields, dividers */
  --border-strong: #3b4359;      /* focus rings, emphasis */

  /* ── Text ── */
  --text-primary: #f1f5f9;       /* headings, key labels */
  --text-secondary: #cbd5e1;     /* body text */
  --text-muted: #94a3b8;         /* captions, metadata */
  --text-disabled: #64748b;      /* disabled state */

  /* ── Brand / accent ── */
  --accent: #818cf8;             /* indigo-400 — primary brand */
  --accent-hover: #a5b4fc;       /* indigo-300 */
  --accent-bg: #1e1b4b;          /* indigo-950 — active nav bg */
  --accent-subtle: rgba(129, 140, 248, 0.1);

  /* ── Semantic states ── */
  --color-success: #34d399;      /* emerald-400 */
  --color-success-bg: rgba(52, 211, 153, 0.12);
  --color-warning: #fbbf24;      /* amber-400 */
  --color-warning-bg: rgba(251, 191, 36, 0.12);
  --color-danger: #f87171;       /* red-400 */
  --color-danger-bg: rgba(248, 113, 113, 0.12);
  --color-info: #60a5fa;         /* blue-400 */
  --color-info-bg: rgba(96, 165, 250, 0.12);

  /* ── Shadows ── */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.45);

  /* ── Misc ── */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);

  color-scheme: dark;
}

[data-theme="light"] {
  --bg-base: #f8fafc;
  --bg-panel: #ffffff;
  --bg-card: #ffffff;
  --bg-elevated: #f1f5f9;

  --border-subtle: #e2e8f0;
  --border-default: #cbd5e1;
  --border-strong: #94a3b8;

  --text-primary: #0f172a;
  --text-secondary: #334155;
  --text-muted: #64748b;
  --text-disabled: #94a3b8;

  --accent: #4f46e5;             /* indigo-600 — better contrast on light */
  --accent-hover: #4338ca;       /* indigo-700 */
  --accent-bg: #eef2ff;          /* indigo-50 — active nav bg */
  --accent-subtle: rgba(79, 70, 229, 0.08);

  --color-success: #059669;
  --color-success-bg: rgba(5, 150, 105, 0.1);
  --color-warning: #d97706;
  --color-warning-bg: rgba(217, 119, 6, 0.1);
  --color-danger: #dc2626;
  --color-danger-bg: rgba(220, 38, 38, 0.1);
  --color-info: #2563eb;
  --color-info-bg: rgba(37, 99, 235, 0.08);

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow-md: 0 4px 6px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 12px 24px rgba(15, 23, 42, 0.12);

  color-scheme: light;
}

/* SVG icon sizing — used by icons.js */
.nav-icon {
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
}
.sidebar-link .nav-icon { width: 1.125rem; height: 1.125rem; }
.btn .nav-icon { width: 1rem; height: 1rem; }

/* Theme toggle button */
.theme-toggle {
  position: fixed;
  bottom: 1rem;
  left: 1rem;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  transition: var(--transition-fast);
}
.theme-toggle:hover {
  color: var(--text-primary);
  border-color: var(--border-strong);
  background: var(--bg-card);
}
.theme-toggle .nav-icon { width: 1rem; height: 1rem; }

@media (max-width: 768px) {
  .theme-toggle { bottom: auto; top: 1rem; right: 1rem; left: auto; }
}