:root {
  /* ===== SPACING SCALE (Base: 4px) ===== */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* ===== BORDER RADIUS ===== */
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 14px;
  --radius-2xl: 20px;
  --radius-full: 100px;

  /* ===== PRIMARY COLOR PALETTE ===== */
  
  /* Main Brand Color - #1EFB97 */
  --color-primary: #1EFB97;
  --color-primary-50: #F0FFF9;
  --color-primary-100: #C6FFE4;
  --color-primary-200: #9DFFD0;
  --color-primary-300: #74FFBB;
  --color-primary-400: #4BFFA7;
  --color-primary-500: #1EFB97;
  --color-primary-600: #18E085;
  --color-primary-700: #13C573;
  --color-primary-800: #0FAA62;
  --color-primary-900: #0A8F50;
  --color-primary-950: #064D2B;
  
  /* ===== SUPPORTING COLORS ===== */
  
  /* Pure Black & White */
  --color-black: #000000;
  --color-white: #FFFFFF;
  
  /* Grays for better contrast and hierarchy */
  --color-gray-50: #F9FAFB;
  --color-gray-100: #F3F4F6;
  --color-gray-200: #E5E7EB;
  --color-gray-300: #D1D5DB;
  --color-gray-400: #9CA3AF;
  --color-gray-500: #6B7280;
  --color-gray-600: #4B5563;
  --color-gray-700: #374151;
  --color-gray-750: #1A202C;
  --color-gray-800: #1F2937;
  --color-gray-900: #111827;
  --color-gray-950: #030712;
  
  /* ===== SEMANTIC COLORS (DARK MODE ONLY) ===== */
  
  /* Background Colors */
  --color-background-primary: var(--color-gray-900);
  --color-background-secondary: var(--color-gray-800);
  --color-background-tertiary: var(--color-gray-700);
  --color-background-dark: var(--color-black);
  --color-background-brand: var(--color-primary);
  
  /* Text Colors */
  --color-text-primary: var(--color-gray-100);
  --color-text-secondary: var(--color-gray-300);
  --color-text-tertiary: var(--color-gray-400);
  --color-text-inverse: var(--color-gray-900);
  --color-text-brand: var(--color-primary);
  --color-text-on-brand: var(--color-black);
  
  /* Border Colors */
  --color-border-light: var(--color-gray-700);
  --color-border-medium: var(--color-gray-600);
  --color-border-dark: var(--color-gray-500);
  --color-border-brand: var(--color-primary);
  
  /* Button Colors */
  --color-button-primary-bg: var(--color-primary);
  --color-button-primary-text: var(--color-black);
  --color-button-primary-hover: var(--color-primary-400);
  --color-button-primary-active: var(--color-primary-300);
  
  --color-button-secondary-bg: var(--color-gray-800);
  --color-button-secondary-text: var(--color-gray-100);
  --color-button-secondary-border: var(--color-gray-600);
  --color-button-secondary-hover: var(--color-gray-700);
  --color-button-secondary-active: var(--color-gray-600);
  
  --color-button-ghost-bg: transparent;
  --color-button-ghost-text: var(--color-primary);
  --color-button-ghost-hover: var(--color-gray-800);
  --color-button-ghost-active: var(--color-gray-700);
  
  /* Link Colors */
  --color-link-default: var(--color-primary);
  --color-link-hover: var(--color-primary-300);
  --color-link-visited: var(--color-primary-400);
  
  /* Status Colors */
  --color-success: var(--color-primary);
  --color-success-light: var(--color-primary-900);
  --color-success-dark: var(--color-primary-300);
  
  --color-warning: #F59E0B;
  --color-warning-light: #451A03;
  --color-warning-dark: #FCD34D;
  
  --color-error: #EF4444;
  --color-error-light: #450A0A;
  --color-error-dark: #FCA5A5;
  
  --color-info: #3B82F6;
  --color-info-light: #1E3A8A;
  --color-info-dark: #93C5FD;
  
  /* ===== SURFACE COLORS ===== */
  
  /* Cards and elevated surfaces */
  --color-surface-primary: var(--color-gray-800);
  --color-surface-secondary: var(--color-gray-700);
  --color-surface-elevated: var(--color-gray-750);
  --color-surface-brand: var(--color-gray-800);
  
  /* Shadows */
  --color-shadow-light: rgba(0, 0, 0, 0.2);
  --color-shadow-medium: rgba(0, 0, 0, 0.3);
  --color-shadow-dark: rgba(0, 0, 0, 0.4);
  --color-shadow-brand: rgba(30, 251, 151, 0.3);
  
  /* ===== OVERLAY COLORS ===== */
  
  --color-overlay-light: rgba(0, 0, 0, 0.3);
  --color-overlay-medium: rgba(0, 0, 0, 0.5);
  --color-overlay-dark: rgba(0, 0, 0, 0.7);
  --color-overlay-darker: rgba(0, 0, 0, 0.9);
  
  /* ===== FOCUS COLORS ===== */
  
  --color-focus-ring: var(--color-primary);
  --color-focus-ring-offset: var(--color-gray-900);
}

/* ===== DARK MODE ONLY - NO LIGHT MODE SUPPORT ===== */

/* ===== UTILITY CLASSES ===== */

.text-brand { color: var(--color-primary); }
.text-on-brand { color: var(--color-text-on-brand); }
.bg-brand { background-color: var(--color-primary); }
.bg-brand-light { background-color: var(--color-primary-100); }
.border-brand { border-color: var(--color-primary); }

.text-white { color: var(--color-white); }
.text-black { color: var(--color-black); }
.bg-white { background-color: var(--color-white); }
.bg-black { background-color: var(--color-black); }

.text-gray-primary { color: var(--color-text-primary); }
.text-gray-secondary { color: var(--color-text-secondary); }
.text-gray-tertiary { color: var(--color-text-tertiary); }