/* ==========================================================================
   SlimNOC2 — Design tokens
   ========================================================================== */

:root {
  /* Base surfaces (dark) */
  --bg-body: #0a111e;
  --bg-sidebar: #0b1220;
  --bg-topbar: #0c1424;
  --bg-surface: #101a2b;
  --bg-surface-2: #142034;
  --bg-surface-3: #18263d;
  --bg-inset: #0d1727;

  /* Borders */
  --border: #1b2941;
  --border-soft: #17233a;
  --border-strong: #24374f;

  /* Text */
  --text: #e6edf8;
  --text-soft: #b7c4d6;
  --text-muted: #7f8da0;
  --text-dim: #5d6b80;

  /* Brand / accents */
  --primary: #2f7cf6;
  --primary-hover: #3d88ff;
  --primary-press: #2166d8;
  --primary-soft: rgba(47, 124, 246, 0.14);
  --primary-soft-2: rgba(47, 124, 246, 0.24);

  --success: #22c55e;
  --success-soft: rgba(34, 197, 94, 0.14);
  --warning: #f5a623;
  --warning-soft: rgba(245, 166, 35, 0.14);
  --danger: #ef4444;
  --danger-soft: rgba(239, 68, 68, 0.14);
  --purple: #8b5cf6;
  --purple-soft: rgba(139, 92, 246, 0.14);
  --cyan: #22d3ee;
  --cyan-soft: rgba(34, 211, 238, 0.14);
  --pink: #ec4899;

  /* Effects */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 18px 50px rgba(0, 0, 0, 0.5);
  --ring: 0 0 0 3px rgba(47, 124, 246, 0.25);

  /* Metrics */
  --sidebar-w: 228px;
  --sidebar-w-collapsed: 72px;
  --topbar-h: 68px;
  --footer-h: 44px;
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;

  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --transition: 160ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* --------------------------------------------------------------------------
   Light theme
   -------------------------------------------------------------------------- */
[data-theme="light"] {
  --bg-body: #f2f5fa;
  --bg-sidebar: #ffffff;
  --bg-topbar: #ffffff;
  --bg-surface: #ffffff;
  --bg-surface-2: #f4f7fc;
  --bg-surface-3: #e9eff8;
  --bg-inset: #f7f9fd;

  --border: #dfe6f0;
  --border-soft: #e9eef6;
  --border-strong: #cbd6e4;

  --text: #16233a;
  --text-soft: #3d4c63;
  --text-muted: #6b7a91;
  --text-dim: #93a1b5;

  --primary-soft: rgba(47, 124, 246, 0.1);
  --primary-soft-2: rgba(47, 124, 246, 0.18);
  --success-soft: rgba(34, 197, 94, 0.12);
  --warning-soft: rgba(245, 166, 35, 0.14);
  --danger-soft: rgba(239, 68, 68, 0.1);
  --purple-soft: rgba(139, 92, 246, 0.12);
  --cyan-soft: rgba(34, 211, 238, 0.14);

  --shadow-sm: 0 1px 2px rgba(20, 35, 60, 0.06);
  --shadow: 0 6px 20px rgba(20, 35, 60, 0.08);
  --shadow-lg: 0 18px 50px rgba(20, 35, 60, 0.14);
}