/**
 * Rootit Warranty CSS Variables
 * Centralized color, spacing, and design token definitions
 */

:root,
.rootit-warranty-page,
.rootit-warranty-dashboard {
    /* ============================================
       Color Palette
       ============================================ */
    
    /* Primary Colors */
    --rootit-primary: #139FFC;
    --rootit-primary-dark: #09498D;
    --rootit-primary-darker: #001E63;
    
    /* Status Colors */
    --rootit-success: #2E7D32;
    --rootit-success-light: #4CAF50;
    --rootit-success-dark: #1B5E20;
    --rootit-success-bg: #E8F5E9;
    --rootit-success-border: #C8E6C9;
    
    --rootit-error: #DC3545;
    --rootit-error-light: #F44336;
    --rootit-error-dark: #C82333;
    --rootit-error-darker: #B71C1C;
    --rootit-error-bg: #FFEBEE;
    --rootit-error-border: #FFCDD2;
    --rootit-error-red-darker: #C62828;
    
    --rootit-warning: #F57C00;
    --rootit-warning-light: #FF9800;
    --rootit-warning-dark: #E65100;
    --rootit-warning-orange-darker: #FFA500;
    --rootit-warning-bg: #FFF3E0;
    --rootit-warning-border: #FFE0B2;
    
    --rootit-info: #1976D2;
    --rootit-info-light: #2196F3;
    --rootit-info-dark: #0D47A1;
    --rootit-info-bg: #E3F2FD;
    --rootit-info-border: #BBDEFB;
    
    --rootit-purple: #7B1FA2;
    --rootit-purple-light: #9C27B0;
    --rootit-purple-dark: #4A148C;
    --rootit-purple-bg: #F3E5F5;
    --rootit-purple-border: #E1BEE7;
    
    /* Neutral Colors */
    --rootit-white: #FFFFFF;
    --rootit-black: #000000;
    --rootit-gray-50: #F7F7F7;
    --rootit-gray-100: #F5F5F5;
    --rootit-gray-200: #E0E0E0;
    --rootit-gray-300: #DDD;
    --rootit-gray-400: #CCCCCC;
    --rootit-gray-500: #999;
    --rootit-gray-600: #666;
    --rootit-gray-700: #555;
    --rootit-gray-800: #333;
    --rootit-gray-900: #222;
    
    /* Text Colors */
    --rootit-text-primary: #001E63;
    --rootit-text-secondary: #666;
    --rootit-text-muted: #999;
    --rootit-text-light: #FFFFFF;
    
    /* Background Colors */
    --rootit-bg-primary: #FFFFFF;
    --rootit-bg-secondary: #F7F7F7;
    --rootit-bg-tertiary: #F9F9F9;
    --rootit-bg-hover: #F5F5F5;
    
    /* Border Colors */
    --rootit-border-color: #E0E0E0;
    --rootit-border-color-light: #F0F0F0;
    --rootit-border-color-dark: #CCCCCC;
    
    /* ============================================
       Spacing (rem units)
       ============================================ */
    
    --rootit-spacing-xs: 0.25rem;   /* 4px */
    --rootit-spacing-sm: 0.5rem;    /* 8px */
    --rootit-spacing-md: 0.75rem;   /* 12px */
    --rootit-spacing-lg: 1rem;      /* 16px */
    --rootit-spacing-xl: 1.25rem;   /* 20px */
    --rootit-spacing-2xl: 1.5rem;   /* 24px */
    --rootit-spacing-3xl: 1.875rem; /* 30px */
    --rootit-spacing-4xl: 2.5rem;    /* 40px */
    
    /* ============================================
       Border Radius (rem units)
       ============================================ */
    
    --rootit-radius-sm: 0.375rem;   /* 6px */
    --rootit-radius-md: 0.5rem;     /* 8px */
    --rootit-radius-lg: 0.625rem;   /* 10px */
    --rootit-radius-xl: 0.75rem;    /* 12px */
    --rootit-radius-2xl: 1.25rem;   /* 20px */
    --rootit-radius-full: 50%;
    
    /* ============================================
       Typography (rem units)
       ============================================ */
    
    --rootit-font-size-xs: 0.75rem;    /* 12px */
    --rootit-font-size-sm: 0.875rem;  /* 14px */
    --rootit-font-size-base: 1rem;     /* 16px */
    --rootit-font-size-lg: 1.125rem;   /* 18px */
    --rootit-font-size-xl: 1.25rem;    /* 20px */
    --rootit-font-size-2xl: 1.5rem;    /* 24px */
    --rootit-font-size-3xl: 2rem;      /* 32px */
    --rootit-font-size-4xl: 3rem;      /* 48px */
    
    --rootit-font-weight-normal: 400;
    --rootit-font-weight-medium: 500;
    --rootit-font-weight-semibold: 600;
    --rootit-font-weight-bold: 700;
    --rootit-font-weight-extrabold: 800;
    
    --rootit-line-height-tight: 1.2;
    --rootit-line-height-normal: 1.5;
    --rootit-line-height-relaxed: 1.8;
    
    /* ============================================
       Shadows
       ============================================ */
    
    --rootit-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --rootit-shadow-md: 0 2px 4px rgba(0, 0, 0, 0.1);
    --rootit-shadow-lg: 0 2px 8px rgba(0, 0, 0, 0.1);
    --rootit-shadow-xl: 0 4px 12px rgba(0, 0, 0, 0.15);
    --rootit-shadow-2xl: 0 8px 20px rgba(0, 0, 0, 0.15);
    --rootit-shadow-primary: 0 2px 8px rgba(19, 159, 252, 0.2);
    --rootit-shadow-primary-lg: 0 4px 12px rgba(19, 159, 252, 0.3);
    
    /* ============================================
       Transitions
       ============================================ */
    
    --rootit-transition-fast: 0.2s ease;
    --rootit-transition-base: 0.3s ease;
    --rootit-transition-slow: 0.4s ease;
    
    /* ============================================
       Z-Index Scale
       ============================================ */
    
    --rootit-z-dropdown: 1000;
    --rootit-z-sticky: 10;
    --rootit-z-modal-backdrop: 999999;
    --rootit-z-modal: 999999;
    --rootit-z-notification: 99999;
    
    /* ============================================
       Layout
       ============================================ */
    
    --rootit-container-max-width: 100%;
    --rootit-container-padding: 1.25rem; /* 20px */
    
    /* ============================================
       Form Elements
       ============================================ */
    
    --rootit-input-height: 3rem;        /* 48px */
    --rootit-input-padding-x: 1.125rem; /* 18px */
    --rootit-input-padding-y: 0.875rem; /* 14px */
    --rootit-input-border-width: 2px;
    --rootit-input-border-radius: var(--rootit-radius-lg);
    --rootit-input-focus-ring: 0 0 0 3px rgba(19, 159, 252, 0.2);
    
    /* ============================================
       Buttons
       ============================================ */
    
    --rootit-button-padding-x: 1.75rem; /* 28px */
    --rootit-button-padding-y: 0.875rem; /* 14px */
    --rootit-button-border-radius: var(--rootit-radius-lg);
    --rootit-button-font-weight: var(--rootit-font-weight-semibold);
    
    /* ============================================
       Lightbox Styles
       ============================================ */
    
    --rootit-lightbox-overlay-bg: rgba(0, 0, 0, 0.9);
    --rootit-lightbox-content-width: 95%;
    --rootit-lightbox-content-max-width: 1400px;
    --rootit-lightbox-content-height: 90vh;
    --rootit-lightbox-content-bg: var(--rootit-white);
    --rootit-lightbox-content-radius: var(--rootit-radius-lg);
    --rootit-lightbox-content-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    
    --rootit-lightbox-main-width: 70%;
    --rootit-lightbox-main-bg: var(--rootit-black);
    
    --rootit-lightbox-close-size: 40px;
    --rootit-lightbox-close-font-size: 28px;
    --rootit-lightbox-close-top: 20px;
    --rootit-lightbox-close-right: 20px;
    --rootit-lightbox-close-color: var(--rootit-white);
    --rootit-lightbox-close-hover-opacity: 0.8;
    --rootit-lightbox-close-z-index: 100000;
    
    --rootit-lightbox-nav-size: 50px;
    --rootit-lightbox-nav-font-size: 32px;
    --rootit-lightbox-nav-color: var(--rootit-white);
    --rootit-lightbox-nav-hover-color: var(--rootit-gray-400);
    --rootit-lightbox-nav-hover-opacity: 0.8;
    --rootit-lightbox-nav-padding: 20px;
    
    --rootit-lightbox-sidebar-width: 30%;
    --rootit-lightbox-sidebar-bg: var(--rootit-white);
    --rootit-lightbox-sidebar-border: 1px solid var(--rootit-border-color);
    --rootit-lightbox-sidebar-header-padding: var(--rootit-spacing-xl);
    --rootit-lightbox-sidebar-header-border: 1px solid var(--rootit-border-color);
    --rootit-lightbox-sidebar-content-padding: var(--rootit-spacing-xl);
    --rootit-lightbox-sidebar-title-font-size: var(--rootit-font-size-lg);
    --rootit-lightbox-sidebar-title-color: var(--rootit-text-primary);
    
    --rootit-lightbox-thumbnail-gap: 12px;
    --rootit-lightbox-thumbnail-border-width: 2px;
    --rootit-lightbox-thumbnail-border-radius: var(--rootit-radius-md);
    --rootit-lightbox-thumbnail-opacity: 0.7;
    --rootit-lightbox-thumbnail-active-opacity: 1;
    --rootit-lightbox-thumbnail-active-border-color: var(--rootit-primary);
    --rootit-lightbox-thumbnail-active-shadow: 0 0 0 2px rgba(19, 159, 252, 0.3);
    
    /* ============================================
       Cards
       ============================================ */
    
    --rootit-card-padding: 1.5625rem;   /* 25px */
    --rootit-card-border-radius: var(--rootit-radius-xl);
    --rootit-card-shadow: var(--rootit-shadow-lg);
    --rootit-card-border: 1px solid var(--rootit-border-color);
    
    /* ============================================
       Tables
       ============================================ */
    
    --rootit-table-padding-x: 0.75rem;  /* 12px */
    --rootit-table-padding-y: 0.875rem; /* 14px */
    --rootit-table-border-radius: var(--rootit-radius-xl);
    
    /* ============================================
       Additional Colors (for hardcoded replacements)
       ============================================ */
    
    /* Modal & Overlay */
    --rootit-modal-overlay: rgba(0, 0, 0, 0.5);
    --rootit-modal-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    
    /* Additional Error Shades */
    --rootit-error-red: #f44336;
    --rootit-error-red-dark: #d32f2f;
    --rootit-error-red-darker: #c62828;
    --rootit-error-wp: #dc3232;
    
    /* Additional Spacing (px values converted to rem) */
    --rootit-spacing-5px: 0.3125rem;   /* 5px */
    --rootit-spacing-10px: 0.625rem;  /* 10px */
    --rootit-spacing-15px: 0.9375rem; /* 15px */
    --rootit-spacing-20px: 1.25rem;   /* 20px */
    --rootit-spacing-30px: 1.875rem; /* 30px */
    
    /* Additional Border Radius (px values) */
    --rootit-radius-4px: 0.25rem;     /* 4px */
    --rootit-radius-8px: 0.5rem;     /* 8px */
    --rootit-radius-12px: 0.75rem;    /* 12px */
    
    /* Additional Font Sizes */
    --rootit-font-size-14px: 0.875rem; /* 14px */
    --rootit-font-size-15px: 0.9375rem; /* 15px */
    --rootit-font-size-24px: 1.5rem;   /* 24px */
    --rootit-font-size-28px: 1.75rem;  /* 28px */
    
    /* Z-Index for Modal */
    --rootit-z-modal-high: 10000;
    
    /* Alert Colors (Bootstrap-like) */
    --rootit-alert-success-bg: #d4edda;
    --rootit-alert-success-text: #155724;
    --rootit-alert-success-border: #c3e6cb;
    --rootit-alert-success-border-accent: #28a745;
    
    --rootit-alert-error-bg: #f8d7da;
    --rootit-alert-error-text: #721c24;
    --rootit-alert-error-border: #f5c6cb;
    --rootit-alert-error-border-accent: #dc3545;
    
    --rootit-alert-info-bg: #d1ecf1;
    --rootit-alert-info-text: #0c5460;
    --rootit-alert-info-border: #bee5eb;
    --rootit-alert-info-border-accent: #17a2b8;
    
    --rootit-alert-warning-bg: #fff3cd;
    --rootit-alert-warning-text: #856404;
    --rootit-alert-warning-border: #ffeeba;
    --rootit-alert-warning-border-accent: #ffc107;
    
    /* Database Info Colors */
    --rootit-db-info-bg: #e8f4f8;
    --rootit-db-warning-bg: #fff3cd;
    --rootit-db-warning-border: #ffb900;
    --rootit-db-warning-text: #856404;
    
    /* Checkbox Navigation Colors */
    --rootit-checkbox-nav-bg: #f0f8ff;
    --rootit-checkbox-nav-border: #b3d9ff;
    --rootit-checkbox-nav-bg-hover: #e6f3ff;
    --rootit-checkbox-nav-border-hover: #80c7ff;
    
    /* API Test Colors */
    --rootit-api-test-info: #17a2b8;
    --rootit-api-test-success: #28a745;
    --rootit-api-test-error: #dc3545;
    
    /* Rating Colors */
    --rootit-rating-star: #ffd700;
    --rootit-rating-star-orange: #ffa500;
    
    /* ============================================
       Leaderboard Colors
       ============================================ */
    
    /* Leaderboard Container */
    --rootit-leaderboard-bg: linear-gradient(135deg, #f8faff 0%, #e8f4ff 100%);
    --rootit-leaderboard-border: #c3d9ff;
    --rootit-leaderboard-border-width: 2px;
    --rootit-leaderboard-shadow: 0 4px 12px rgba(0, 30, 99, 0.08);
    --rootit-leaderboard-padding: 1.25rem; /* 20px */
    --rootit-leaderboard-margin-y: 1.5rem 0 2rem; /* 24px 0 32px */
    --rootit-leaderboard-radius: 1rem; /* 16px */
    
    /* Leaderboard Header */
    --rootit-leaderboard-header-margin-bottom: 1.5rem; /* 24px */
    --rootit-leaderboard-title-font-size: 1.25rem; /* 20px */
    --rootit-leaderboard-title-font-weight: 700;
    --rootit-leaderboard-title-color: #001e63;
    --rootit-leaderboard-title-gap: 0.5rem; /* 8px */
    --rootit-leaderboard-icon-size: 1.5rem; /* 24px */
    --rootit-leaderboard-subtitle-font-size: 0.875rem; /* 14px */
    --rootit-leaderboard-subtitle-color: #4a5568;
    --rootit-leaderboard-subtitle-font-weight: 500;
    
    /* Leaderboard Grid */
    --rootit-leaderboard-grid-gap: 1rem; /* 16px */
    --rootit-leaderboard-grid-padding: 0.5rem 0.25rem 1rem; /* 8px 4px 16px */
    
    /* Leaderboard Card */
    --rootit-leaderboard-card-width: 140px;
    --rootit-leaderboard-card-min-width: 140px;
    --rootit-leaderboard-card-padding: 0.75rem; /* 12px */
    --rootit-leaderboard-card-bg: #ffffff;
    --rootit-leaderboard-card-border: #e2e8f0;
    --rootit-leaderboard-card-border-width: 2px;
    --rootit-leaderboard-card-radius: 1rem; /* 16px */
    --rootit-leaderboard-card-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
    --rootit-leaderboard-card-shadow-hover: 0 6px 12px rgba(0, 30, 99, 0.15);
    
    /* Leaderboard Card Name */
    --rootit-leaderboard-card-name-font-size: 0.9375rem; /* 15px */
    --rootit-leaderboard-card-name-font-weight: 600;
    --rootit-leaderboard-card-name-color: #001e63;
    --rootit-leaderboard-card-name-line-height: 1.4;
    
    /* Leaderboard Card Rank */
    --rootit-leaderboard-card-rank-font-size: 0.8125rem; /* 13px */
    --rootit-leaderboard-card-rank-color: #4a5568;
    --rootit-leaderboard-card-rank-font-weight: 500;
    --rootit-leaderboard-card-rank-gap: 0.25rem; /* 4px */
    --rootit-leaderboard-card-medal-size: 1rem; /* 16px */
    
    /* Leaderboard Card Points */
    --rootit-leaderboard-card-points-gap: 0;
    --rootit-leaderboard-card-points-margin-top: 0.25rem; /* 4px */
    --rootit-leaderboard-card-points-value-font-size: 1.125rem; /* 18px */
    --rootit-leaderboard-card-points-value-font-weight: 700;
    --rootit-leaderboard-card-points-value-color: #001e63;
    --rootit-leaderboard-card-points-value-bg: linear-gradient(135deg, #f0f6ff 0%, #e8f4ff 100%);
    --rootit-leaderboard-card-points-value-border: #c3d9ff;
    --rootit-leaderboard-card-points-value-padding: 0.375rem 0.75rem; /* 6px 12px */
    --rootit-leaderboard-card-points-value-radius: 0.5rem; /* 8px */
    --rootit-leaderboard-card-points-value-shadow: 0 2px 4px rgba(0, 30, 99, 0.1);
    
    /* Leaderboard Golden Rank Colors - Improved contrast for better readability */
    --rootit-leaderboard-rank-1-color: #8b6914;
    --rootit-leaderboard-rank-2-color: #9d7a2b;
    --rootit-leaderboard-rank-3-color: #b08d42;
    --rootit-leaderboard-rank-4-color: #b8860b; /* Darker for better contrast */
    --rootit-leaderboard-rank-5-color: #c4960f; /* Darker for better contrast */
    --rootit-leaderboard-rank-6-color: #d0a613; /* Darker for better contrast */
    --rootit-leaderboard-rank-7-color: #dcb617; /* Darker for better contrast */
    --rootit-leaderboard-rank-8-color: #e8c61b; /* Darker for better contrast */
    
    /* Leaderboard Golden Rank Points Backgrounds - Improved contrast */
    --rootit-leaderboard-rank-1-points-bg: linear-gradient(135deg, #fff9e6 0%, #fff5d9 100%);
    --rootit-leaderboard-rank-1-points-border: #ffd700;
    --rootit-leaderboard-rank-2-points-bg: linear-gradient(135deg, #fff8e0 0%, #fff4d6 100%);
    --rootit-leaderboard-rank-2-points-border: #ffdc33;
    --rootit-leaderboard-rank-3-points-bg: linear-gradient(135deg, #fff7db 0%, #fff3d3 100%);
    --rootit-leaderboard-rank-3-points-border: #ffe066;
    --rootit-leaderboard-rank-4-points-bg: linear-gradient(135deg, #fff6d6 0%, #fff2d0 100%);
    --rootit-leaderboard-rank-4-points-border: #ffd966;
    --rootit-leaderboard-rank-5-points-bg: linear-gradient(135deg, #fff5d1 0%, #fff1cd 100%);
    --rootit-leaderboard-rank-5-points-border: #ffe699;
    --rootit-leaderboard-rank-6-points-bg: linear-gradient(135deg, #fff4cc 0%, #fff0ca 100%);
    --rootit-leaderboard-rank-6-points-border: #ffebcc;
    --rootit-leaderboard-rank-7-points-bg: linear-gradient(135deg, #fff3c7 0%, #ffefc7 100%);
    --rootit-leaderboard-rank-7-points-border: #fff0d9;
    --rootit-leaderboard-rank-8-points-bg: linear-gradient(135deg, #fff2c2 0%, #ffeec4 100%);
    --rootit-leaderboard-rank-8-points-border: #fff5e6;
}