/* FirstLab + Nexus STEM Hybrid - Enhanced Brand Design Tokens */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

:root {
  /* Original FirstLab Brand Colors */
  --violet: #6C4CF1;
  --violet-dark: #5538D4;
  --lavender: #A78BFA;
  --periwinkle: #7C9DFF;
  --sky: #57B6FF;
  --mist: #F3EEFF;
  --indigo: #2B2E83;
  --ink: #1F2454;
  --muted: #68709C;
  --white: #FFFFFF;
  --border: #E5DEFF;
  --success: #2EB67D;
  --warning: #F59E0B;
  --error: #EF4444;
  --surface: #FAFBFF;
  --card-bg: #FFFFFF;

  /* New Dark Green Accents - Incorporating Nexus STEM feel */
  --forest: #1B4332;
  --forest-light: #2D5A3D;
  --forest-dark: #0F2818;
  --sage: #7C8471;
  --sage-light: #A8B19F;
  --mint: #A8DADC;
  --mint-dark: #8BCBDB;

  /* Enhanced Gradients with Green Accents */
  --grad-hero: linear-gradient(135deg, #2B2E83 0%, #5538D4 40%, #6C4CF1 75%, #7C9DFF 100%);
  --grad-hero-green: linear-gradient(135deg, #1B4332 0%, #2B2E83 50%, #6C4CF1 100%);
  --grad-logo: linear-gradient(135deg, #6C4CF1 0%, #A78BFA 50%, #57B6FF 100%);
  --grad-logo-green: linear-gradient(135deg, #1B4332 0%, #6C4CF1 50%, #57B6FF 100%);
  --grad-card: linear-gradient(135deg, #6C4CF1 0%, #7C9DFF 100%);
  --grad-card-green: linear-gradient(135deg, #1B4332 0%, #6C4CF1 100%);
  --grad-soft: linear-gradient(135deg, #F3EEFF 0%, #EEF2FF 100%);
  --grad-soft-green: linear-gradient(135deg, #F3EEFF 0%, #E6F3F5 100%);

  /* Professional Green Alternatives */
  --primary-green: #1B4332;
  --secondary-green: #2D5A3D;
  --accent-green: #A8DADC;
  --light-green: #E6F3F5;

  /* Spacing */
  --sp-xs: 4px;
  --sp-sm: 8px;
  --sp-md: 16px;
  --sp-lg: 24px;
  --sp-xl: 32px;
  --sp-2xl: 48px;

  /* Border Radius */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(108,76,241,0.08), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 16px rgba(108,76,241,0.12), 0 2px 8px rgba(0,0,0,0.06);
  --shadow-lg: 0 8px 32px rgba(108,76,241,0.16), 0 4px 16px rgba(0,0,0,0.08);
  --shadow-xl: 0 20px 60px rgba(108,76,241,0.20), 0 8px 32px rgba(0,0,0,0.12);
  
  /* Green Shadows */
  --shadow-green-sm: 0 1px 3px rgba(27,67,50,0.08), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-green-md: 0 4px 16px rgba(27,67,50,0.12), 0 2px 8px rgba(0,0,0,0.06);
  --shadow-green-lg: 0 8px 32px rgba(27,67,50,0.16), 0 4px 16px rgba(0,0,0,0.08);

  /* Typography */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-serif: 'Georgia', 'Times New Roman', serif;

  /* Transitions */
  --t-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-med: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-spring: 350ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Dark mode support with green accents */
@media (prefers-color-scheme: dark) {
  :root {
    --forest: #A8DADC;
    --forest-light: #7C8471;
    --forest-dark: #E6F3F5;
    --sage: #A8B19F;
    --sage-light: #7C8471;
    --mint: #1B4332;
    --mint-dark: #2D5A3D;
    
    --grad-hero-green: linear-gradient(135deg, #0F2818 0%, #1F2454 50%, #5538D4 100%);
    --grad-logo-green: linear-gradient(135deg, #0F2818 0%, #5538D4 50%, #A78BFA 100%);
    --grad-card-green: linear-gradient(135deg, #0F2818 0%, #5538D4 100%);
    --grad-soft-green: linear-gradient(135deg, #1F2454 0%, #2B2E83 100%);
  }
}

/* Animations */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-12px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes sheetUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes logoReveal {
  0% { opacity: 0; transform: scale(0.7) rotate(-10deg); }
  60% { opacity: 1; transform: scale(1.08) rotate(2deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

@keyframes sparkle {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; }
  50% { transform: scale(1.2) rotate(15deg); opacity: 0.8; }
}

@keyframes drawRing {
  from { stroke-dashoffset: 251; }
  to { stroke-dashoffset: var(--target-offset, 63); }
}

@keyframes typewriter {
  from { width: 0; }
  to { width: 100%; }
}

@keyframes countUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes toastSlide {
  from { transform: translateX(120%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}