/* ============================================
   CSS VARIABLES
   Strict Mapping from globals.css
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&family=Montserrat:wght@700;800;900&display=swap');

:root {
    /* Colors - Core Palette (HSL values for alpha support) */
    --primary: 222.2 47.4% 11.2%;
    /* Slate 900 */
    --primary-foreground: 210 40% 98%;
    /* Slate 50 */

    --secondary: 210 40% 96.1%;
    /* Slate 100 */
    --secondary-foreground: 222.2 47.4% 11.2%;

    --accent: 210 40% 96.1%;
    /* Slate 100 */
    --accent-foreground: 222.2 47.4% 11.2%;

    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;

    --card: 0 0% 100%;
    --card-foreground: 222.2 47.4% 11.2%;

    --popover: 0 0% 100%;
    --popover-foreground: 222.2 47.4% 11.2%;

    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 222.2 84% 4.9%;

    /* Semantic Colors */
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;

    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;

    /* Custom Gradients (from components) */
    --gradient-blue-purple: linear-gradient(to right, #2563eb, #9333ea);
    /* blue-600 to purple-600 */
    --gradient-blue-purple-text: -webkit-linear-gradient(0deg, #2563eb, #9333ea);

    /* Fonts */
    --font-sans: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-heading: 'Montserrat', sans-serif;

    /* Spacing & Radius */
    --radius: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-2xl: 1.5rem;
    --radius-full: 9999px;

    /* Z-Index */
    --z-negative: -1;
    --z-normal: 1;
    --z-sticky: 100;
    --z-fixed: 1000;
    --z-modal: 2000;

    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

    /* Transitions */
    --transition-base: 0.3s ease;
    --transition-smooth: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;

    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;

    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;

    --primary: 210 40% 98%;
    --primary-foreground: 222.2 47.4% 11.2%;

    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;

    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;

    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;

    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;

    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 212.7 26.8% 83.9%;
}

/* Utility to use HSL variables */
.bg-primary {
    background-color: hsl(var(--primary));
}

.text-primary {
    color: hsl(var(--primary));
}

.bg-secondary {
    background-color: hsl(var(--secondary));
}

.text-secondary {
    color: hsl(var(--secondary));
}