/* ========================================
   RVENTAS - CSS Variables & Design Tokens
   ======================================== */

:root {
    /* === Color Palette === */
    /* Primary Blues */
    --primary-blue: #0A84FF;
    --secondary-blue: #64D2FF;
    --dark-blue: #0A1929;
    --darker-blue: #051220;
    --accent-cyan: #00E5FF;
    
    /* Semantic Colors */
    --success-green: #00D9A0;
    --warning-orange: #FF9F0A;
    --danger-red: #FF3B30;
    
    /* Neutrals */
    --white: #FFFFFF;
    --gray-50: #F8FAFC;
    --gray-100: #F1F5F9;
    --gray-200: #E2E8F0;
    --gray-300: #CBD5E1;
    --gray-400: #94A3B8;
    --gray-500: #64748B;
    --gray-600: #475569;
    --gray-700: #334155;
    --gray-800: #1E293B;
    --gray-900: #0F172A;
    
    /* === Shadows === */
    --shadow-sm: 0 2px 8px rgba(10, 25, 41, 0.08);
    --shadow-md: 0 8px 24px rgba(10, 25, 41, 0.12);
    --shadow-lg: 0 16px 48px rgba(10, 25, 41, 0.16);
    --shadow-xl: 0 24px 64px rgba(10, 25, 41, 0.24);
    
    /* === Glass Effects === */
    --glass-bg: rgba(255, 255, 255, 0.08);
    --glass-border: rgba(255, 255, 255, 0.12);
    
    /* === Transitions === */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);
    
    /* === Typography === */
    --font-display: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    
    /* Font Sizes */
    --text-xs: 12px;
    --text-sm: 14px;
    --text-base: 16px;
    --text-lg: 18px;
    --text-xl: 20px;
    --text-2xl: 24px;
    --text-3xl: 32px;
    --text-4xl: 40px;
    --text-5xl: 48px;
    --text-6xl: 56px;
    
    /* Font Weights */
    --font-light: 300;
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    --font-extrabold: 800;
    --font-black: 900;
    
    /* === Spacing === */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 40px;
    --space-3xl: 48px;
    --space-4xl: 64px;
    --space-5xl: 80px;
    
    /* === Border Radius === */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-2xl: 24px;
    --radius-full: 9999px;
    
    /* === Z-Index Scale === */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
    
    /* === Layout === */
    --container-max: 1400px;
    --section-padding: 120px;
}

/* === Media Query Breakpoints === */
/* Use these in your media queries for consistency */
/*
  Mobile: max-width: 640px
  Tablet: max-width: 768px
  Desktop Small: max-width: 968px
  Desktop: max-width: 1200px
  Desktop XL: min-width: 1400px
*/