:root {
  /* Primary Colors */
  --primary: #36b26a;
  --primary-hover: #2e9d5c;
  --primary-active: #278a50;
  --primary-light: rgb(54 178 106 / 12%);
  --primary-gradient: linear-gradient(135deg, #36b26a 0%, #18a08a 100%);

  /* Secondary */
  --secondary: #18a08a;
  --secondary-hover: #148f7a;

  /* Backgrounds */
  --bg-main: #f9fafb;
  --bg-card: #fff;
  --bg-sidebar: rgb(255 255 255 / 72%);
  --bg-input: #f3f4f6;
  --bg-secondary: #f3f4f6;
  --bg-tertiary: #eceef1;
  --bg-hover: rgb(54 178 106 / 6%);
  --bg-overlay: rgb(0 0 0 / 45%);

  /* Text */
  --text-primary: #111827;
  --text-secondary: #6b7280;
  --text-tertiary: #9ca3af;
  --text-placeholder: #d1d5db;
  --text-inverse: #fff;

  /* Borders */
  --border-color: #e5e7eb;
  --border-light: #f3f4f6;
  --border-focus: var(--primary);

  /* Semantic */
  --success: #10b981;
  --warning: #f59e0b;
  --error: #ef4444;
  --info: #3b82f6;

  /* RGB variants for rgba() usage */
  --primary-rgb: 54, 178, 106;
  --success-rgb: 16, 185, 129;
  --warning-rgb: 245, 158, 11;
  --error-rgb: 239, 68, 68;
  --info-rgb: 59, 130, 246;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 4%);
  --shadow-md: 0 4px 12px rgb(0 0 0 / 6%);
  --shadow-lg: 0 8px 24px rgb(0 0 0 / 8%);
  --shadow-btn: 0 1px 3px rgb(0 0 0 / 8%), inset 0 1px 0 rgb(255 255 255 / 25%);
  --shadow-card: 0 1px 3px rgb(0 0 0 / 5%);

  /* Spacing - 4px base grid system */
  --spacing-2xs: 2px;   /* Micro: borders, hairlines */
  --spacing-xs: 4px;    /* Extra small: tight gaps */
  --spacing-sm: 8px;    /* Small: compact elements */
  --spacing-md: 12px;   /* Medium: standard gaps */
  --spacing-lg: 16px;   /* Large: section gaps */
  --spacing-xl: 24px;   /* Extra large: page sections */
  --spacing-2xl: 32px;  /* 2x Large: major sections */
  --spacing-3xl: 48px;  /* 3x Large: page spacing */

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 50%;

  /* Typography */
  --font-family: 'Inter', -apple-system, blinkmacsystemfont, 'Segoe UI', sans-serif;
  --font-xs: 11px;
  --font-sm: 13px;
  --font-base: 14px;
  --font-md: 15px;
  --font-lg: 18px;
  --font-xl: 22px;
  --font-2xl: 28px;

  /* Layout */
  --sidebar-width: 180px;
  --sidebar-collapsed: 68px;
  --header-height: 56px;

  /* Transition */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.25s ease;
  --transition-slow: 0.4s ease;

  /* Glassmorphism */
  --glass-blur: blur(12px);
  --glass-bg: rgb(255 255 255 / 72%);
  --glass-border: rgb(255 255 255 / 20%);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg-main: #1a1d21;
    --bg-card: #25292e;
    --bg-sidebar: rgb(37 41 46 / 82%);
    --bg-input: #2f3338;
    --bg-secondary: #2f3338;
    --bg-tertiary: #374151;
    --bg-hover: rgb(54 178 106 / 10%);
    --bg-overlay: rgb(0 0 0 / 60%);
    --text-primary: #f3f4f6;
    --text-secondary: #d1d5db;
    --text-tertiary: #9ca3af;
    --text-placeholder: #6b7280;
    --border-color: #4b5563;
    --border-light: #374151;
    --shadow-sm: 0 1px 2px rgb(0 0 0 / 20%);
    --shadow-md: 0 4px 12px rgb(0 0 0 / 30%);
    --shadow-lg: 0 8px 24px rgb(0 0 0 / 40%);
    --shadow-btn: 0 1px 3px rgb(0 0 0 / 30%), inset 0 1px 0 rgb(255 255 255 / 6%);
    --shadow-card: 0 1px 3px rgb(0 0 0 / 20%);
    --glass-bg: rgb(37 41 46 / 82%);
    --glass-border: rgb(255 255 255 / 8%);
  }
}

/* Manual dark mode override */
:root[data-theme='dark'] {
  --bg-main: #1a1d21;
  --bg-card: #25292e;
  --bg-sidebar: rgb(37 41 46 / 82%);
  --bg-input: #2f3338;
  --bg-hover: rgb(54 178 106 / 10%);
  --bg-overlay: rgb(0 0 0 / 60%);
  --text-primary: #f3f4f6;
  --text-secondary: #d1d5db;
  --text-tertiary: #9ca3af;
  --text-placeholder: #6b7280;
  --border-color: #4b5563;
  --border-light: #374151;
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 20%);
  --shadow-md: 0 4px 12px rgb(0 0 0 / 30%);
  --shadow-lg: 0 8px 24px rgb(0 0 0 / 40%);
  --shadow-btn: 0 1px 3px rgb(0 0 0 / 30%), inset 0 1px 0 rgb(255 255 255 / 6%);
  --shadow-card: 0 1px 3px rgb(0 0 0 / 20%);
  --glass-bg: rgb(37 41 46 / 82%);
  --glass-border: rgb(255 255 255 / 8%);
}
