/* --- START OF FILE css/variables.css --- */
/* Merged from sp360-25 (primary) and sp360-4 */

:root {
    /* Colors (Primarily from sp360-25, ensuring sp360-4's intent is covered) */
    --primary-color: #4a90e2;       /* Consistent in both */
    --secondary-color: #818cf8;     /* Consistent in both */
    --accent-color: #059669;       /* Professional emerald green for dark mode */
    /* --accent-color-alt: #3b82f6; Alternative blue accent from sp360-4 if needed, but sp360-25's is more distinct */

    --text-color: #ffffff;          /* Consistent */
    --text-secondary: #94a3b8;      /* sp360-25's is a bit more specific than rgba(255,255,255,0.8) */

    --bg-color: #0f172a;            /* Consistent */
    --bg-secondary: #1e293b;        /* Consistent */

    --card-bg: rgba(255, 255, 255, 0.05); /* Consistent */
    --card-border: rgba(255, 255, 255, 0.1); /* Consistent (sp360-25 name, sp360-4 value) */
                                          /* sp360-4 called it --border-color */

    /* RGB versions for rgba() usage */
    --primary-rgb: 74, 144, 226;
    --secondary-rgb: 129, 140, 248;
    --accent-rgb: 5, 150, 105;
    --bg-color-rgb: 15, 23, 42;
    --bg-secondary-rgb: 30, 41, 59;

    /* Gradients (Primarily from sp360-25) */
    --gradient-primary: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); /* Consistent */
    --gradient-accent: linear-gradient(135deg, var(--accent-color), var(--primary-color)); /* From sp360-25 */
    --gradient-bg: linear-gradient(135deg, var(--bg-color) 0%, var(--bg-secondary) 100%); /* sp360-4 had #0f172a, #1e293b - essentially same */

    /* Spacing (Adopted sp360-4's naming convention, values can be from either or averaged) */
    /* Using sp360-4's scale as it's slightly more granular */
    --spacing-xs: 0.5rem;   /* 8px */
    --spacing-sm: 1rem;     /* 16px */
    --spacing-md: 1.5rem;   /* 24px */
    --spacing-lg: 2rem;     /* 32px */
    --spacing-xl: 3rem;     /* 48px */
    --spacing-2xl: 4rem;    /* 64px */
    --spacing-3xl: 5rem;    /* 80px */

    /* Typography (Font family consistent, size scale from sp360-4) */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --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-size-5xl: 3rem;      /* 48px */
    --font-size-6xl: 3.75rem;   /* 60px */

    /* Shadows (Adopted sp360-25's naming for more variety, sp360-4 glow shadow kept) */
    --shadow-light: rgba(74, 144, 226, 0.1); /* sp360-25 specific */
    --shadow-medium: rgba(0, 0, 0, 0.2);      /* sp360-25 specific */
    --shadow-heavy: rgba(0, 0, 0, 0.4);       /* sp360-25 specific */

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);   /* From sp360-4 */
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);    /* From sp360-4 */
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);  /* From sp360-4 */
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);  /* From sp360-4 */
    --shadow-glow: 0 0 20px rgba(74, 144, 226, 0.3); /* From sp360-4, very useful */

    /* Border Radius (From sp360-4, generally good scale) */
    --radius-sm: 0.375rem;  /* 6px */
    --radius-md: 0.5rem;    /* 8px */
    --radius-lg: 0.75rem;   /* 12px */
    --radius-xl: 1rem;      /* 16px */
    --radius-2xl: 1.5rem;   /* 24px */
    --radius-full: 50%;     /* Consistent */
    /* Added from sp360-25 common values */
    --radius-card: 20px; /* For consistent card-like elements */
    --radius-button: 12px; /* For buttons */
    --radius-pill: 50px; /* For pill shaped badges/buttons */


    /* Transitions (From sp360-25, more descriptive names) */
    --transition-fast: 0.2s ease;
    --transition-medium: 0.3s ease;
    --transition-slow: 0.5s ease;
    /* sp360-4 had --transition-base: 0.3s ease; which is covered by --transition-medium */

    /* Z-index (From sp360-4, good comprehensive stack) */
    /*
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030; 
    --z-modal-backdrop: 1040; 
    --z-modal: 2000; 
    --z-popover: 1060;
    --z-tooltip: 1070;
    --z-notification: 3000;
    --z-preloader: 9999; 
    --z-custom-cursor: 10000;
    --z-skip-link: 10000; */

    /* For scroll progress bar (from sp360-25) */
    --scroll-progress: 0%;

}

/* Dark mode adjustments (sp360-4 had a light mode variant, sp360-25 was dark-only by default) */
/* We will keep the site dark-first as per both designs.
   If a light mode is desired, the variables below can be used in a class or media query.
   For now, this section is more for reference if light mode is activated.
*/
@media (prefers-color-scheme: light) {
    /* :root {
        --text-color: #1f2937;
        --text-secondary: rgba(31, 41, 55, 0.8);
        --bg-color: #ffffff;
        --bg-secondary: #f8fafc;
        --card-bg: #ffffff; // Solid white for light mode cards
        --card-border: rgba(0, 0, 0, 0.1);
        --shadow-light: rgba(0, 0, 0, 0.05);
        --shadow-medium: rgba(0, 0, 0, 0.1);
        --shadow-heavy: rgba(0, 0, 0, 0.15);
        --shadow-glow: 0 0 20px rgba(74, 144, 226, 0.2); // Glow might need adjustment for light
    } */
    /* Intentionally keeping dark mode as primary for this merge,
       Light mode theming would require more extensive review of all component styles. */
}

/* Light Mode Theme Variables - Professional Blue-Gray Palette */
[data-theme="light"] {
    /* Primary Colors - Adjusted for your backgrounds */
    --primary-color: #1a5490;      /* Deep blue for CTAs - excellent contrast */
    --accent-color: #10b981;      /* Deep green for success states */
    
    /* Text Colors - High contrast for readability */
    --text-color: #0f172a;          /* Near black - excellent readability */
    --text-secondary: #334155;      /* Dark gray - good contrast on both backgrounds */
    
    /* Background Colors - Your Selected Colors */
    --bg-color: #b4cbe4;            /* Light blue-gray - primary background */
    --bg-secondary: #7ca4d0;        /* Deeper blue - alternate sections */
    
    /* Card and Component Colors */
    --card-bg: #ffffff;             /* Pure white for cards - stands out nicely */
    --card-border: rgba(15, 23, 42, 0.12); /* Dark border for definition */
    
    /* RGB versions for rgba() usage */
    --primary-rgb: 26, 84, 144;
    --secondary-rgb: 37, 99, 235;
    --accent-rgb: 16, 185, 129;
    --bg-color-rgb: 180, 203, 228;
    --bg-secondary-rgb: 124, 164, 208;
    
    /* Gradients for Light Mode */
    --gradient-primary: linear-gradient(135deg, #1a5490, #2563eb);
    --gradient-accent: linear-gradient(135deg, #4e8df3, #75b2fd);
    --gradient-bg: linear-gradient(135deg, #b4cbe4 0%, #7ca4d0 100%);
    
    /* Shadows for Light Mode - Darker for better definition */
    --shadow-light: 0 1px 3px rgba(15, 23, 42, 0.12);
    --shadow-medium: 0 4px 6px rgba(15, 23, 42, 0.15), 0 1px 3px rgba(15, 23, 42, 0.08);
    --shadow-heavy: 0 10px 15px rgba(15, 23, 42, 0.18), 0 4px 6px rgba(15, 23, 42, 0.12);
    --shadow-glow: 0 0 20px rgba(26, 84, 144, 0.35);
    
    /* Section Specific Colors */
    --section-bg-primary: #b4cbe4;     /* Your light blue-gray */
    --section-bg-secondary: #7ca4d0;   /* Your deeper blue */
    --section-bg-accent: #ffffff;      /* White for emphasis sections */
    --section-border: rgba(15, 23, 42, 0.15); /* Dark border for section separation */
    --section-divider: rgba(15, 23, 42, 0.1); /* Subtle divider */
}

/* Additional light mode overrides for better contrast 
[data-theme="light"] .cta-button.primary,
[data-theme="light"] .submit-btn {
    background: linear-gradient(135deg, #2563eb, #4f46e5);
}

[data-theme="light"] .gradient-text,
[data-theme="light"] .hero h1 .gradient-text {
    background: linear-gradient(135deg, #2563eb, #7c3aed);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
*/

/* --- END OF FILE css/variables.css --- */