:root {
  /* ============================================ */
  /* 🎨 MODERN COLOR SYSTEM (2024)              */
  /* ============================================ */
  
  /* Primary Colors - Indigo Vibrant */
  --primary-50: #EEF2FF;
  --primary-100: #E0E7FF;
  --primary-200: #C7D2FE;
  --primary-300: #A5B4FC;
  --primary-400: #818CF8;
  --primary-500: #6366F1;
  --primary-600: #4F46E5;  /* Main primary */
  --primary-700: #4338CA;
  --primary-800: #3730A3;
  --primary-900: #312E81;
  
  /* Neutral Colors - Gray Scale (Escurecido para conforto visual) */
  --neutral-50: #E8EDF2;
  --neutral-100: #D9E1E8;
  --neutral-200: #C4CFD9;
  --neutral-300: #B0BFCD;
  --neutral-400: #9CA3AF;
  --neutral-500: #6B7280;
  --neutral-600: #4B5563;
  --neutral-700: #374151;
  --neutral-800: #1F2937;
  --neutral-900: #111827;
  
  /* Semantic Colors */
  --success-50: #ECFDF5;
  --success-100: #D1FAE5;
  --success-500: #10B981;
  --success-600: #059669;
  --success-700: #047857;
  
  --warning-50: #FFFBEB;
  --warning-100: #FEF3C7;
  --warning-500: #F59E0B;
  --warning-600: #D97706;
  --warning-700: #B45309;
  
  --danger-50: #FEF2F2;
  --danger-100: #FEE2E2;
  --danger-500: #EF4444;
  --danger-600: #DC2626;
  --danger-700: #B91C1C;
  
  --info-50: #EFF6FF;
  --info-100: #DBEAFE;
  --info-500: #3B82F6;
  --info-600: #2563EB;
  --info-700: #1D4ED8;
  
  /* ============================================ */
  /* 📏 SPACING SYSTEM (reduzido 20%)           */
  /* ============================================ */
  --spacing-1: 3px;    /* xs */
  --spacing-2: 6px;    /* sm */
  --spacing-3: 10px;   /* md */
  --spacing-4: 13px;   /* lg */
  --spacing-5: 16px;   
  --spacing-6: 19px;   /* xl */
  --spacing-8: 26px;   /* 2xl */
  --spacing-10: 40px;
  --spacing-12: 48px;  /* 3xl */
  --spacing-16: 64px;  /* 4xl */
  
  /* ============================================ */
  /* 📝 TYPOGRAPHY SYSTEM (reduzido 15%)        */
  /* ============================================ */
  --font-size-xs: 0.688rem;   /* ~11px */
  --font-size-sm: 0.813rem;   /* ~13px */
  --font-size-base: 0.938rem; /* ~15px */
  --font-size-lg: 1.063rem;   /* ~17px */
  --font-size-xl: 1.188rem;   /* ~19px */
  --font-size-2xl: 1.375rem;  /* ~22px */
  --font-size-3xl: 1.875rem;  /* 30px */
  --font-size-4xl: 2rem;      /* 32px */
  
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;
  
  /* ============================================ */
  /* 🌓 SHADOWS (Elevation)                      */
  /* ============================================ */
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  
  /* ============================================ */
  /* 📐 BORDER RADIUS                            */
  /* ============================================ */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-full: 9999px;
  
  /* ============================================ */
  /* 🎭 TRANSITIONS                              */
  /* ============================================ */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  
  /* ============================================ */
  /* 🎯 LEGACY COMPATIBILITY                     */
  /* Mantém nomes antigos apontando para novos  */
  /* ============================================ */
  --primary-color: var(--primary-600);
  --secondary-color: var(--primary-500);
  --accent-color: var(--danger-500);
  --success-color: var(--success-600);
  --warning-color: var(--warning-500);
  --light-color: var(--neutral-100);
  --dark-color: var(--neutral-800);
  
  /* Role colors (mantidos para compatibilidade) */
  --lojinha-color: #1d78ff;
  --cantina-color: #b15858;
  --servant-color: #ce6bf8;
  --secretary-color: #4cda14;
  --photo-color: #f0ebbc;
  --admin-color: #ec7728;
  --coordination-color: #1be4bc;
  --external-color: #dcadf7;
  --loja-color: #e6de7b;
  --partial-color: var(--warning-500);
  --active-color: var(--success-600);
  
  /* Basic colors */
  --color-black: #000000;
  --color-red: var(--danger-500);
  --color-green: var(--success-500);
}

/* ============================================ */
/* 🌙 DARK MODE VARIABLES                      */
/* ============================================ */
[data-theme="dark"] {
  --primary-600: #6366F1;
  --neutral-50: #1F2937;
  --neutral-100: #111827;
  --neutral-900: #F9FAFB;
  
  /* Inversões para dark mode */
  --dark-bg-primary: #0F172A;
  --dark-bg-secondary: #1E293B;
  --dark-bg-tertiary: #334155;
  --dark-text-primary: #F1F5F9;
  --dark-text-secondary: #CBD5E1;
  --dark-border: #475569;
}