/**
 * Noribel shared design tokens (classic / production baseline).
 * Full UI packs override chrome in nor-ui-packs.css via html[data-ui="…"].
 * Load AFTER main-*.css.
 */

:root,
html[data-ui="classic"] {
  --bg-page: #ffffff;
  --bg-subtle: #f0f5fb;
  --bg-card: #ffffff;
  --bg-card-muted: #f8fafd;
  --border: rgba(11, 34, 51, 0.09);
  --border-strong: rgba(11, 34, 51, 0.14);
  --border-solid: #e2e8f0;
  --text: #0f1222;
  --text-muted: #5c6178;
  --text-subtle: #85899e;
  --sidebar-fg: #0b2233;
  --sidebar-fg-muted: #1c6c9e;
  /* Official Noribel brand palette */
  --noribel-sky: #8ec7ed;
  --noribel-blue: #42abe0;
  --noribel-marine: #1c6c9e;
  --noribel-night: #0b2233;
  /* Legacy aliases: sky fills bars; marine drives chrome */
  --cyan: var(--noribel-sky);
  --cyan-dim: rgba(142, 199, 237, 0.18);
  --violet: var(--noribel-sky);
  --coral: var(--noribel-sky);
  --noribel-blue-fill: var(--noribel-sky);
  --noribel-blue-dark: var(--noribel-marine);
  --noribel-blue-dim: rgba(142, 199, 237, 0.18);
  --accent: var(--noribel-marine);
  --accent-hot: var(--noribel-blue);
  --live: #10b981;
  --danger: #e11d48;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --sidebar-w: 268px;
  --font: "Outfit", system-ui, -apple-system, sans-serif;
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --shadow-glow-cyan: 0 8px 36px rgba(142, 199, 237, 0.22);
  --shadow-glow-violet: 0 8px 36px rgba(66, 171, 224, 0.16);
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
}

/* ── Token-only skins (2026-08-30) ──
   Safe app-wide: each skin only swaps variables — no layout, no structure.
   Structural chrome packs (topnav/rail/workspace/minimal) are parked; see
   nor-ui-packs.css. */

html[data-ui="slate"] {
  --bg-page: #f6f7f9;
  --bg-subtle: #eceef2;
  --bg-card: #ffffff;
  --bg-card-muted: #f3f4f6;
  --border: rgba(17, 24, 39, 0.1);
  --border-strong: rgba(17, 24, 39, 0.16);
  --border-solid: #d9dde3;
  --text: #111827;
  --text-muted: #4b5563;
  --text-subtle: #7b8494;
  --sidebar-fg: #111827;
  --sidebar-fg-muted: #6b7280;
  --accent: #4f46e5;
  --accent-hot: #4338ca;
  --noribel-blue: #818cf8;
  --noribel-blue-dark: #4f46e5;
  --noribel-blue-dim: rgba(129, 140, 248, 0.16);
  --cyan: #818cf8;
  --cyan-dim: rgba(129, 140, 248, 0.16);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --shadow-glow-cyan: 0 8px 30px rgba(79, 70, 229, 0.16);
  --shadow-glow-violet: 0 8px 30px rgba(79, 70, 229, 0.12);
}

html[data-ui="sport"] {
  --bg-page: #fffdfa;
  --bg-subtle: #fff3ea;
  --bg-card: #ffffff;
  --bg-card-muted: #fff8f2;
  --border: rgba(67, 20, 7, 0.1);
  --border-strong: rgba(67, 20, 7, 0.16);
  --border-solid: #f3ddd0;
  --text: #1c1210;
  --text-muted: #6d5b52;
  --text-subtle: #93827a;
  --accent: #ea580c;
  --accent-hot: #c2410c;
  --noribel-blue: #fb923c;
  --noribel-blue-dark: #ea580c;
  --noribel-blue-dim: rgba(251, 146, 60, 0.18);
  --cyan: #fb923c;
  --cyan-dim: rgba(251, 146, 60, 0.18);
  --live: #16a34a;
  --shadow-glow-cyan: 0 8px 36px rgba(234, 88, 12, 0.2);
  --shadow-glow-violet: 0 8px 36px rgba(234, 88, 12, 0.14);
}

html[data-ui="paper"] {
  --bg-page: #faf8f3;
  --bg-subtle: #f1ede3;
  --bg-card: #fffefb;
  --bg-card-muted: #f7f4ec;
  --border: rgba(41, 37, 30, 0.11);
  --border-strong: rgba(41, 37, 30, 0.17);
  --border-solid: #e4ded1;
  --text: #1c1917;
  --text-muted: #6b6459;
  --text-subtle: #948c7f;
  --sidebar-fg: #1c1917;
  --sidebar-fg-muted: #7c7367;
  --accent: #0f766e;
  --accent-hot: #115e59;
  --noribel-blue: #2dd4bf;
  --noribel-blue-dark: #0f766e;
  --noribel-blue-dim: rgba(45, 212, 191, 0.16);
  --cyan: #2dd4bf;
  --cyan-dim: rgba(45, 212, 191, 0.16);
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --shadow-glow-cyan: 0 8px 30px rgba(15, 118, 110, 0.14);
  --shadow-glow-violet: 0 8px 30px rgba(15, 118, 110, 0.1);
}

/* Bridge Super Settings --ss-* → shared tokens */
.super-settings-page {
  --ss-gap-lg: var(--space-6);
  --ss-gap: var(--space-4);
  --ss-blue: var(--accent);
  --ss-blue-hover: var(--accent-hot);
  --ss-slate-50: var(--bg-subtle);
  --ss-slate-100: var(--bg-card-muted);
  --ss-slate-200: var(--border-solid);
  --ss-slate-300: #cbd5e1;
  --ss-slate-500: var(--text-muted);
  --ss-slate-700: var(--text-muted);
  --ss-slate-900: var(--text);
  font-family: var(--font);
}