/* ── Design Tokens ─────────────────────────────────────────────────────────── */
:root {
  --bg:#f4f5f7;--surface:#fff;--border:#e2e5e9;--border2:#d0d5dd;
  --text:#111827;--muted:#6b7280;--accent:#2563eb;--accent-bg:#eff6ff;
  --green:#16a34a;--green-bg:#f0fdf4;--amber:#d97706;--amber-bg:#fffbeb;
  --red:#dc2626;--red-bg:#fef2f2;--purple:#7c3aed;--purple-bg:#f5f3ff;
  --hover:#f3f4f6;--success:#16a34a;--danger:#dc2626;--nav-bg:#1e293b;
  --radius:8px;--radius-lg:12px;

  /* ── Spacing scale (8-point grid) ── */
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;
  --sp-6:24px;--sp-8:32px;--sp-10:40px;--sp-12:48px;

  /* ── Type scale ── */
  --text-xs:11px;--text-sm:12px;--text-base:14px;
  --text-lg:16px;--text-xl:20px;--text-2xl:24px;--text-3xl:30px;

  /* ── Shadows ── */
  --shadow-sm:0 1px 3px rgba(0,0,0,.07),0 1px 2px rgba(0,0,0,.05);
  --shadow-md:0 4px 12px rgba(0,0,0,.09),0 2px 4px rgba(0,0,0,.06);
  --shadow-lg:0 8px 24px rgba(0,0,0,.11),0 4px 8px rgba(0,0,0,.07);
}
[data-theme="dark"] {
  --bg:#0f172a;--surface:#1e293b;--border:#334155;--border2:#475569;
  --text:#f1f5f9;--muted:#94a3b8;--accent:#3b82f6;--accent-bg:#1e3a5f;
  --green:#22c55e;--green-bg:#14532d;--amber:#f59e0b;--amber-bg:#451a03;
  --red:#f87171;--red-bg:#450a0a;--purple:#a78bfa;--purple-bg:#2e1065;
  --hover:#283650;--success:#22c55e;--danger:#f87171;--nav-bg:#020817;
}
[data-theme="dark"] body{color-scheme:dark}
[data-theme="dark"] .login-wrap{background:linear-gradient(135deg,#020817 0%,#1e3a5f 100%)}
[data-theme="dark"] .sidebar{background:var(--nav-bg)}
[data-theme="dark"] input,[data-theme="dark"] select,[data-theme="dark"] textarea{background:var(--surface);color:var(--text);border-color:var(--border2)}
[data-theme="dark"] input::placeholder,[data-theme="dark"] textarea::placeholder{color:var(--muted)}
[data-theme="dark"] .card{background:var(--surface)}
[data-theme="dark"] .btn{background:var(--surface);color:var(--text);border-color:var(--border2)}
[data-theme="dark"] .btn:hover{background:var(--hover)}
[data-theme="dark"] .btn-primary{background:var(--accent);color:#fff;border-color:var(--accent)}
[data-theme="dark"] .btn-primary:hover{background:#2563eb}
[data-theme="dark"] .alert-info{background:var(--accent-bg);color:var(--text);border-color:var(--accent)}
[data-theme="dark"] .alert-warn{background:var(--amber-bg);color:var(--amber);border-color:var(--amber)}
[data-theme="dark"] .alert-danger{background:var(--red-bg);color:var(--red);border-color:var(--red)}
[data-theme="dark"] .modal-backdrop{background:rgba(0,0,0,.7)}
[data-theme="dark"] .modal-box{background:var(--surface)}
[data-theme="dark"] .modal-header{border-color:var(--border)}
[data-theme="dark"] .modal-footer{border-color:var(--border);background:var(--bg)}
[data-theme="dark"] table{color:var(--text)}
[data-theme="dark"] thead tr{background:var(--bg)}
[data-theme="dark"] tbody tr:hover{background:var(--hover)}
[data-theme="dark"] .topbar{background:var(--surface);border-color:var(--border)}
[data-theme="dark"] .nav-item:hover,[data-theme="dark"] .nav-item.active{background:rgba(255,255,255,.08)}
[data-theme="dark"] .tag{background:var(--hover);color:var(--text)}
[data-theme="dark"] .help-table thead tr{background:var(--bg)}
[data-theme="dark"] .settings-collapsible summary{background:var(--bg)}
[data-theme="dark"] .notif-panel{background:var(--surface);border-color:var(--border)}
[data-theme="dark"] .notif-item.unread{background:var(--accent-bg)}
[data-theme="dark"] .lvl-1{background:#451a03;color:#fbbf24}
[data-theme="dark"] .lvl-3{background:#064e3b;color:#34d399}
[data-theme="dark"] .role-admin{background:#451a03;color:#fbbf24;border-color:#78350f}
[data-theme="dark"] .role-editor{background:var(--accent-bg);color:var(--accent);border-color:var(--accent)}
[data-theme="dark"] {
  --shadow-sm:0 1px 3px rgba(0,0,0,.25),0 1px 2px rgba(0,0,0,.2);
  --shadow-md:0 4px 12px rgba(0,0,0,.3),0 2px 4px rgba(0,0,0,.2);
  --shadow-lg:0 8px 24px rgba(0,0,0,.4),0 4px 8px rgba(0,0,0,.25);
}