/*
 * Nexora Components - Global Styles
 * Version 1.0
 */

/* ============================================
   IMPORTS
   ============================================ */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1');

/* ============================================
   CSS VARIABLES (Design Tokens)
   ============================================ */
:root {
    /* Brand Colors */
    --color-primary: #1e3a8a;      /* Deep Blue */
    --color-secondary: #16a34a;    /* Action Green */
    --color-accent: #f97316;       /* Highlight Orange */
    
    /* Surface Colors */
    --color-surface: #ffffff;      /* Pure White */
    --color-background: #f8fafc;   /* Light Gray */
    --color-border: #e2e8f0;       /* Light Border */
    
    /* Text Colors */
    --color-text-primary: #0f172a;    /* Slate-900 */
    --color-text-secondary: #64748b;  /* Slate-500 */
    --color-text-muted: #94a3b8;      /* Slate-400 */
    
    /* Typography */
    --font-family-sans: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    
    /* Shadows */
    --shadow-soft: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* ============================================
   BASE STYLES
   ============================================ */
body {
    font-family: var(--font-family-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

/* Gradient Text */
.text-gradient {
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(to right, var(--color-primary), var(--color-secondary));
}

/* Smooth Scrolling */
html.scroll-smooth {
    scroll-behavior: smooth;
}

/* Custom Backdrop Blur for Header */
.backdrop-blur-custom {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* ============================================
   COMPONENT STYLES
   ============================================ */

/* Logo Brightness for Footer */
.logo-footer {
    filter: grayscale(100%) brightness(200%);
}

/* Card Hover Effect */
.card-hover-lift {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card-hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

/* Button Hover Lift */
.btn-hover-lift {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-hover-lift:hover {
    transform: translateY(-2px);
}

/* Image Zoom on Hover */
.image-zoom-hover {
    overflow: hidden;
}

.image-zoom-hover img {
    transition: transform 0.5s ease;
}

.image-zoom-hover:hover img {
    transform: scale(1.1);
}

/* ============================================
   RESPONSIVE UTILITIES
   ============================================ */

/* Ensure images are responsive by default */
img {
    max-width: 100%;
    height: auto;
}

/* ============================================
   ACCESSIBILITY
   ============================================ */

/* Focus visible for keyboard navigation */
*:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Skip to main content link (hidden until focused) */
.skip-to-main {
    position: absolute;
    left: -9999px;
    z-index: 999;
}

.skip-to-main:focus {
    left: 50%;
    transform: translateX(-50%);
    top: 1rem;
    background: var(--color-primary);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
}

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {
    .no-print {
        display: none !important;
    }
}