:root {
  color-scheme: dark;

  /* ── Base ─────────────────────────────────────────────────────────────────── */
  --bg:        #07080d;
  --bg2:       #0b0d17;
  --bg3:       #10121f;

  /* Glass surfaces (use with backdrop-filter) */
  --surface:   rgba(14, 16, 30, 0.75);
  --surface2:  rgba(255, 255, 255, 0.04);
  --surface3:  rgba(255, 255, 255, 0.07);

  /* Solid fallbacks for elements without canvas behind */
  --panel-bg:  #0d0f1e;
  --modal-bg:  #0f1124;

  /* Glass borders */
  --border:    rgba(255, 255, 255, 0.07);
  --border2:   rgba(255, 255, 255, 0.12);
  --border3:   rgba(255, 255, 255, 0.18);

  /* ── Text ─────────────────────────────────────────────────────────────────── */
  --text:      #eef0ff;
  --text1:     #eef0ff;
  --text2:     #6c7490;
  --text3:     #373d58;

  /* ── Accent ───────────────────────────────────────────────────────────────── */
  --accent:      #6366f1;
  --accent-h:    #818cf8;
  --accent-lo:   rgba(99, 102, 241, 0.13);
  --accent-glow: rgba(99, 102, 241, 0.35);

  /* ── Status ───────────────────────────────────────────────────────────────── */
  --green:      #22c55e;
  --green-lo:   rgba(34,  197, 94,  0.12);
  --yellow:     #f59e0b;
  --yellow-lo:  rgba(245, 158, 11,  0.12);
  --red:        #ef4444;
  --red-lo:     rgba(239, 68,  68,  0.12);
  --blue:       #3b82f6;
  --blue-lo:    rgba(59,  130, 246, 0.12);
  --purple:     #a855f7;
  --cyan:       #06b6d4;
  --pink:       #ec4899;
  --orange:     #f97316;

  /* ── Module colors ────────────────────────────────────────────────────────── */
  --mod-products:    #6366f1;
  --mod-inventory:   #22c55e;
  --mod-suppliers:   #f59e0b;
  --mod-financial:   #3b82f6;
  --mod-marketplace: #ec4899;
  --mod-projects:    #a855f7;
  --mod-calendar:    #06b6d4;
  --mod-logistics:   #0ea5e9;
  --mod-note:        #f59e0b;
  --mod-users:       #10b981;

  /* ── Sizing ───────────────────────────────────────────────────────────────── */
  --sidebar-w:  220px;
  --panel-w:    300px;
  --topbar-h:   52px;
  --radius:     8px;
  --radius-lg:  14px;
  --radius-xl:  18px;

  /* ── Shadows ──────────────────────────────────────────────────────────────── */
  --shadow:     0 4px 20px rgba(0, 0, 0, 0.5);
  --shadow-lg:  0 12px 40px rgba(0, 0, 0, 0.65);
  --shadow-xl:  0 24px 64px rgba(0, 0, 0, 0.75);
  --glow:       0 0 20px rgba(99, 102, 241, 0.25);
  --glow-sm:    0 0 12px rgba(99, 102, 241, 0.2);
}