:root {
  /* ── Brand / sidebar ─────────────────────────────────────── */
  --color-sidebar-bg:      #0f172a;   /* slate-900 */
  --color-sidebar-hover:   #1e293b;   /* slate-800 */
  --color-sidebar-active:  #1d4ed8;   /* blue-700  */
  --color-sidebar-text:    #94a3b8;   /* slate-400 */
  --color-sidebar-text-active: #ffffff;
  --color-sidebar-border:  #1e293b;

  --color-accent:          #a5dade;  
  --color-accent-hover:    #5ec9d3;   
  --color-accent-light:    rgba(59,130,246,0.18);
  --color-accent-muted:    rgba(59,130,246,0.18);
  --color-accent-button:   #f2a369bf;
  --color-accent-button-hover: #f2a369;

  /* ── Dark surfaces ───────────────────────────────────────── */
  --color-bg:              #0f172a;   /* slate-900  main bg */
  --color-surface:         #1e293b;   /* slate-800  cards, inputs */
  --color-surface-raised:  #243049;   /* slightly lighter — th / card-header */
  --color-border:          #334155;   /* slate-700 */
  --color-border-hover:    #475569;   /* slate-600 */

  /* ── Text ───────────────────────────────────────────────── */
  --color-text:            #e2e8f0;   /* slate-200 */
  --color-text-secondary:  #94a3b8;   /* slate-400 */
  --color-text-muted:      #94a3b8;   /* slate-400 — bright enough on dark bg */

  /* ── Status — brighter for dark bg, hues kept identical ──── */
  --color-success:         #4ade80;   /* green-400  */
  --color-success-bg:      rgba(22,163,74,0.14);
  --color-success-border:  rgba(74,222,128,0.28);

  --color-warning:         #fbbf24;   /* amber-400  */
  --color-warning-bg:      rgba(217,119,6,0.14);
  --color-warning-border:  rgba(251,191,36,0.28);

  --color-danger:          #f87171;   /* red-400    */
  --color-danger-bg:       rgba(220,38,38,0.14);
  --color-danger-border:   rgba(248,113,113,0.28);

  --color-info:            #38bdf8;   /* sky-400    */
  --color-info-bg:         rgba(8,145,178,0.14);
  --color-info-border:     rgba(56,189,248,0.28);

  --color-neutral-bg:      #1e293b;
  --color-neutral-border:  #334155;

  /* ── Layout ─────────────────────────────────────────────── */
  --sidebar-width:         240px;
  --topbar-height:         0px;
  --content-padding:       2rem;

  /* ── Type ───────────────────────────────────────────────── */
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* ── Radius / shadow ────────────────────────────────────── */
  --radius-sm:   4px;
  --radius:      6px;
  --radius-lg:   10px;
  --shadow-sm:   0 1px 2px rgba(0,0,0,.35), 0 1px 3px rgba(0,0,0,.25);
  --shadow:      0 4px 6px -1px rgba(0,0,0,.40), 0 2px 4px -2px rgba(0,0,0,.25);
  --shadow-md:   0 10px 15px -3px rgba(0,0,0,.45), 0 4px 6px -4px rgba(0,0,0,.25);

  /* ── Transitions ─────────────────────────────────────────── */
  --transition: all 0.15s ease;
}