/* ========================================
   Design Tokens / CSS Variables
   Cleaned • Deduplicated • Renamed
======================================== */

:root {
  /* Brand Colors */
  --color-primary: #7c63e3;
  --color-primary-dark: #6450d0;
  --color-primary-light: #ccccf6;
  --color-primary-fade: rgba(124, 99, 227, 0.08);

  /* Status Colors */
  --color-success: #28a745;
  --color-danger: #dc3545;
  --color-warning: #ffc107;
  --color-info: #17a2b8;
  --color-secondary: #0ea5e9;

  /* Neutral Colors */
  --color-white: #ffffff;
  --color-black: #111827;

  --color-gray-50: #fafafa;
  --color-gray-100: #f5f5f7;
  --color-gray-200: #e5e7eb;
  --color-gray-400: #9ca3af;
  --color-gray-700: #374151;
  --color-gray-900: #111827;

  --color-muted: #6c757d;
  --color-light: #f8f9fa;
  --color-dark: #343a40;
  --color-border: hsl(0, 0%, 90%);
  --color-text-inverse: #ffffff;

  /* Layout */
  --sidebar-width: 150px;
  --loader-sz: 200px;

  /* Border Radius */
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-full: 999px;

  /* Shadows */
  --shadow-card: 0 2px 4px rgba(0, 0, 0, 0.04),
                 0 12px 40px rgba(0, 0, 0, 0.08);

  --shadow-button: 0 4px 14px rgba(124, 99, 227, 0.35);

  /* Animation */
  --transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);

  /* Typography */
  --font-family-base: 'Figtree', 'Inter', -apple-system,
                      BlinkMacSystemFont, 'Segoe UI',
                      Roboto, sans-serif;

  /* Semantic Theme Variables (Light Mode Default) */
  --bg-dash-body: #fdfdfd;
  --bg-card: #ffffff;
  --bg-sidebar: rgba(255, 255, 255, 0.3);
  --bg-sidebar-toggle: rgba(255, 255, 255);
  --bg-header: transparent;
  --sidebar-text: #525252;
  --text-main: #1e293b;
  --text-muted: #64748b;
  --border-main: #e2e8f0;
  --card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* Dark Mode Overrides */
body.dark-mode {
  --bg-dash-body: #0f172a;
  --bg-card: #1e293b;
  --bg-sidebar: rgba(15, 23, 42, 0.9);
  --bg-sidebar-toggle: rgba(15, 23, 42);
  --bg-header: #1e293b;
  --sidebar-text: #f1f5f9;
  --text-main: #f1f5f9;
  --text-muted: #94a3b8;
  --border-main: #334155;
  --card-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
  
  /* Redefine base colors for dark mode context */
  --color-white: #1e293b;
  --color-gray-50: #0f172a;
  --color-gray-100: #1e293b;
  --color-border: #334155;
}

/* Global Transitions for smooth theme switching */
body {
  transition: background-color 0.3s ease, color 0.3s ease;
}

body * {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}