:root {
  /* ========== CORES PRINCIPAIS (LIGHT MODE) ========== */
  
  /* Primary - Baseado na logo Gippo */
  --primary-900: #0F2F42;
  --primary-700: #1B4D6B;
  --primary-500: #2E7D9A;
  --primary-300: #5CB8E4;
  --primary-100: #E8F4F8;
  
  /* Feedback */
  --success: #00C48C;
  --success-light: #E6F9F3;
  --warning: #FFB946;
  --warning-light: #FFF4E6;
  --error: #FF6B6B;
  --error-light: #FFE6E6;
  --info: #4ECDC4;
  --info-light: #E6F9F8;
  
  /* Neutros */
  --gray-900: #1A1A1A;
  --gray-800: #2D2D2D;
  --gray-700: #4A4A4A;
  --gray-600: #6B6B6B;
  --gray-500: #858585;
  --gray-400: #A3A3A3;
  --gray-300: #CCCCCC;
  --gray-200: #E5E5E5;
  --gray-100: #F5F5F5;
  --white: #FFFFFF;
  
  /* ========== BACKGROUNDS ========== */
  --bg-page: #F8FAFB;
  --bg-card: rgba(255, 255, 255, 0.7);
  --bg-card-hover: rgba(255, 255, 255, 0.85);
  --bg-gradient: linear-gradient(135deg, #E8F4F8 0%, #F8FAFB 100%);
  
  /* ========== GLASSMORPHISM ========== */
  --glass-bg: rgba(255, 255, 255, 0.25);
  --glass-border: rgba(255, 255, 255, 0.18);
  --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
  --backdrop-blur: blur(10px);

  /* ========== SUPERFÍCIES (TOKENS POR TEMA) ========== */
  /* Header glass (dashboard) */
  --header-glass-bg: rgba(255, 255, 255, 0.72);
  --header-glass-border: rgba(46, 125, 154, 0.16);
  --header-glass-shadow: 0 10px 28px rgba(31, 38, 135, 0.12);

  /* Client card (admin) */
  --client-card-border: rgba(46, 125, 154, 0.18);
  --client-card-border-hover: rgba(46, 125, 154, 0.28);
  --client-card-bg:
    radial-gradient(1200px 400px at -10% -20%, rgba(92, 184, 228, 0.22), transparent 55%),
    radial-gradient(900px 360px at 110% 10%, rgba(46, 125, 154, 0.18), transparent 55%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.82), rgba(248, 250, 251, 0.62));
  --client-card-shadow:
    0 18px 44px rgba(31, 38, 135, 0.12),
    0 0 0 1px rgba(92, 184, 228, 0.10);
  --client-card-shadow-hover:
    0 26px 64px rgba(31, 38, 135, 0.18),
    0 0 0 1px rgba(92, 184, 228, 0.18),
    0 0 28px rgba(92, 184, 228, 0.10);
  --client-card-shine-hover: rgba(92, 184, 228, 0.22);

  /* Progress track + glows */
  --progress-track-bg: rgba(15, 20, 25, 0.10);
  --progress-glow: rgba(92, 184, 228, 0.22);
  --icon-glow: rgba(46, 125, 154, 0.22);
  
  /* ========== SOMBRAS ========== */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.16);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.20);
  
  /* ========== TIPOGRAFIA ========== */
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Courier New', monospace;
  
  --font-size-xs: 0.75rem;    /* 12px */
  --font-size-sm: 0.875rem;   /* 14px */
  --font-size-base: 1rem;     /* 16px */
  --font-size-lg: 1.125rem;   /* 18px */
  --font-size-xl: 1.25rem;    /* 20px */
  --font-size-2xl: 1.5rem;    /* 24px */
  --font-size-3xl: 1.875rem;  /* 30px */
  --font-size-4xl: 2.25rem;   /* 36px */
  
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  
  /* ========== ESPAÇAMENTOS ========== */
  --spacing-xs: 0.25rem;   /* 4px */
  --spacing-sm: 0.5rem;    /* 8px */
  --spacing-md: 1rem;      /* 16px */
  --spacing-lg: 1.5rem;    /* 24px */
  --spacing-xl: 2rem;      /* 32px */
  --spacing-2xl: 3rem;     /* 48px */
  --spacing-3xl: 4rem;     /* 64px */
  
  /* ========== BORDER RADIUS ========== */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;
  
  /* ========== TRANSIÇÕES ========== */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
  
  /* ========== Z-INDEX ========== */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
}

/* ========== DARK MODE ========== */
[data-theme="dark"] {
  /* Backgrounds */
  --bg-page: #0F1419;
  --bg-card: rgba(30, 35, 45, 0.7);
  --bg-card-hover: rgba(40, 45, 55, 0.85);
  /* Fundo mais rico (dark): #0F1419 → #1A2332 → #0F1419 */
  --bg-gradient: linear-gradient(135deg, #0F1419 0%, #1A2332 50%, #0F1419 100%);
  
  /* Glassmorphism Dark */
  --glass-bg: rgba(30, 35, 45, 0.4);
  --glass-border: rgba(255, 255, 255, 0.1);
  --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4);

  /* Superfícies (dark) */
  --header-glass-bg: rgba(15, 20, 25, 0.85);
  --header-glass-border: rgba(92, 184, 228, 0.12);
  --header-glass-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);

  --client-card-border: rgba(92, 184, 228, 0.18);
  --client-card-border-hover: rgba(92, 184, 228, 0.35);
  --client-card-bg:
    radial-gradient(1200px 400px at -10% -20%, rgba(92, 184, 228, 0.20), transparent 55%),
    radial-gradient(900px 360px at 110% 10%, rgba(46, 125, 154, 0.18), transparent 55%),
    linear-gradient(135deg, rgba(30, 35, 45, 0.72), rgba(15, 20, 25, 0.55));
  --client-card-shadow:
    0 18px 44px rgba(0, 0, 0, 0.40),
    0 0 0 1px rgba(92, 184, 228, 0.08);
  --client-card-shadow-hover:
    0 26px 64px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(92, 184, 228, 0.22),
    0 0 28px rgba(92, 184, 228, 0.12);
  --client-card-shine-hover: rgba(92, 184, 228, 0.28);

  --progress-track-bg: rgba(255, 255, 255, 0.10);
  --progress-glow: rgba(92, 184, 228, 0.28);
  --icon-glow: rgba(92, 184, 228, 0.28);
  
  /* Neutros invertidos */
  --gray-900: #F5F5F5;
  --gray-800: #E5E5E5;
  --gray-700: #CCCCCC;
  --gray-600: #A3A3A3;
  --gray-500: #858585;
  --gray-400: #6B6B6B;
  --gray-300: #4A4A4A;
  --gray-200: #2D2D2D;
  --gray-100: #1A1A1A;
  
  /* Sombras mais profundas */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.6);
}