:root {

   /* =========================
   COLOR SYSTEM
========================= */


   /* -----------------
     Surfaces
  ----------------- */
   --bg-gradient: radial-gradient(circle at top, var(--surface-1), var(--surface-0) 70%);
   --card-bg: var(--surface-3);
   --card-border: var(--border-subtle);
   --card-hover-border: var(--brand-primary);
   --card-hover-shadow: 0 12px 30px rgba(0, 0, 0, 0.5), 0 0 35px rgba(124, 92, 255, 0.35);

   /* -----------------
     Accent / Brand
  ----------------- */
   --accent: var(--brand-primary);
   --accent-hover: var(--brand-primary-hover);

   /* -----------------
     Progress / Bars
  ----------------- */
   --progress-bg: var(--surface-2);
   --progress-fill: var(--brand-primary);

   /* -----------------
     Links / Buttons
  ----------------- */
   --link-color: var(--brand-primary);
   --link-hover: var(--brand-primary-hover);

   /* -----------------
     Misc
  ----------------- */
   --text-light: var(--text-main);
   --text-muted-light: var(--text-muted);

   /* ---- Surfaces (Dark UI Layers) ---- */
   --surface-0: #1c1f25;
   /* app background, very dark */
   --surface-1: #232629;
   /* header/sidebar background */
   --surface-2: #2b2d31;
   /* cards / stat cards → more neutral gray */
   --surface-3: #313338;
   /* widget cards → soft gray */
   --surface-4: #3a3c40;
   /* legacy aliases (so layout stays dark if old refs or wholesale.css removed) */
   --primary-bg: var(--surface-0);
   --secondary-bg: var(--surface-2);
   /* hover / highlight → lighter gray */
   --surface-active: #46484d;
   /* active / selected → subtle but visible */



   /* ---- Text ---- */
   --text-strong: #f5f7fa;
   --text-main: #d6dbe3;
   --text-muted: #b5bcc8;
   /* readable muted; was #9aa4b2 */
   --text-faint: #8d96a4;
   --text-subtle: var(--text-faint);
   --text-inverse: #0f1115;

   /* ---- Brand ---- */
   --brand-primary: #9b7ebd;
   --brand-primary-hover: #8565a3;
   --brand-accent: #00d4ff;

   /* ---- Status (Dark Theme Friendly, Softened) ---- */
   --success: #1f7a3e;
   /* softer dark green */
   --warning: #b28f1a;
   /* muted gold, warmer but not neon */
   --warning-rgb: 178, 143, 26;
   /* for rgba(var(--warning-rgb), alpha) */
   --error: #b45c5c;
   /* deep red, darker and more subtle */
   --error-rgb: 180, 92, 92;
   /* for rgba(--error-rgb, alpha) */
   --info: #0c8dbd;
   /* muted teal-blue */
   --info-hover: #0a7a9e;


   /* ---- Borders ---- */
   --border-subtle: #232a3a;
   --border-strong: #2f3a52;

   /* ---- Shadows ---- */
   --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.4);
   --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.5);
   --shadow-lg: 0 10px 28px rgba(0, 0, 0, 0.6);

   /* =========================
   SPACING SYSTEM
========================= */
   --spacing-xs: 4px;
   --spacing-sm: 8px;
   --spacing-md: 16px;
   --spacing-lg: 24px;
   --spacing-xl: 32px;

   /* =========================
   RADIUS
========================= */
   --radius-sm: 6px;
   --radius-md: 10px;
   --radius-lg: 16px;

   /* =========================
   TYPOGRAPHY
========================= */
   --font-family-base: 'Inter', system-ui, sans-serif;
   --font-size-small: 0.85rem;
   --font-size-base: 1rem;
   --font-size-lg: 1.25rem;

   /* =========================
   TRANSITIONS
========================= */
   --transition-fast: 0.15s ease;
   --transition-medium: 0.25s ease;

   /* =========================
   LAYOUT
========================= */
   --header-height: 70px;
   --rolebar-height: 36px;

}