/* Edulite Professional Fintech Design System CSS Variables */
/* Generated from design tokens - DO NOT EDIT MANUALLY */

:root {
  /* Color System - Light Mode */
  --edulite-color-primary: #8B7BF7;
  --edulite-color-on-primary: #FFFFFF;
  --edulite-color-primary-container: #B4A9FF;
  --edulite-color-on-primary-container: #2B2D42;
  
  --edulite-color-secondary: #FF8FA3;
  --edulite-color-on-secondary: #FFFFFF;
  --edulite-color-secondary-container: #FFB5A7;
  --edulite-color-on-secondary-container: #2B2D42;
  
  --edulite-color-tertiary: #4ECDC4;
  --edulite-color-on-tertiary: #FFFFFF;
  --edulite-color-tertiary-container: #95E1D3;
  --edulite-color-on-tertiary-container: #2B2D42;
  
  --edulite-color-error: #FF5449;
  --edulite-color-on-error: #FFFFFF;
  --edulite-color-error-container: #FFB4AB;
  --edulite-color-on-error-container: #2B2D42;
  
  --edulite-color-background: #FAFAFA;
  --edulite-color-on-background: #2B2D42;
  --edulite-color-surface: #FFFFFF;
  --edulite-color-on-surface: #2B2D42;
  --edulite-color-surface-variant: #F0F0F3;
  --edulite-color-on-surface-variant: #3D3F52;
  
  --edulite-color-outline: #8D8F9A;
  --edulite-color-outline-variant: #F0F0F3;
  --edulite-color-shadow: #000000;
  --edulite-color-scrim: #000000;
  
  --edulite-color-inverse-surface: #2B2D42;
  --edulite-color-inverse-on-surface: #FAFAFA;
  --edulite-color-inverse-primary: #B4A9FF;
  
  --edulite-color-surface-container-lowest: #FFFFFF;
  --edulite-color-surface-container-highest: #F0F0F3;
  
  /* Branded Color Palette */
  --edulite-purple: #8B7BF7;
  --edulite-purple-light: #B4A9FF;
  --edulite-purple-dark: #6B5BD6;
  
  --edulite-pink: #FF8FA3;
  --edulite-coral: #FFB5A7;
  --edulite-peach: #FEC89A;
  
  --edulite-yellow: #FFD166;
  --edulite-blue: #4ECDC4;
  --edulite-green: #95E1D3;
  
  --edulite-dark: #2B2D42;
  --edulite-dark-gray: #3D3F52;
  --edulite-medium-gray: #8D8F9A;
  --edulite-light-gray: #F0F0F3;
  --edulite-white: #FFFFFF;
  --edulite-off-white: #FAFAFA;
  
  /* Typography System */
  --edulite-font-primary: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --edulite-font-display: 'Poppins', 'Inter', sans-serif;
  --edulite-font-brand: 'Poppins', 'Inter', sans-serif;
  
  /* Typography Scale */
  --edulite-text-hero-size: 56px;
  --edulite-text-hero-line-height: 1.1;
  --edulite-text-hero-weight: 700;
  --edulite-text-hero-spacing: -0.02em;
  
  --edulite-text-display-large-size: 40px;
  --edulite-text-display-large-line-height: 1.2;
  --edulite-text-display-large-weight: 600;
  --edulite-text-display-large-spacing: -0.01em;
  
  --edulite-text-display-medium-size: 32px;
  --edulite-text-display-medium-line-height: 1.3;
  --edulite-text-display-medium-weight: 600;
  --edulite-text-display-medium-spacing: 0;
  
  --edulite-text-headline-large-size: 24px;
  --edulite-text-headline-large-line-height: 1.4;
  --edulite-text-headline-large-weight: 600;
  --edulite-text-headline-large-spacing: 0;
  
  --edulite-text-headline-medium-size: 20px;
  --edulite-text-headline-medium-line-height: 1.4;
  --edulite-text-headline-medium-weight: 600;
  --edulite-text-headline-medium-spacing: 0;
  
  --edulite-text-title-large-size: 18px;
  --edulite-text-title-large-line-height: 1.4;
  --edulite-text-title-large-weight: 600;
  --edulite-text-title-large-spacing: 0;
  
  --edulite-text-title-medium-size: 16px;
  --edulite-text-title-medium-line-height: 1.5;
  --edulite-text-title-medium-weight: 500;
  --edulite-text-title-medium-spacing: 0;
  
  --edulite-text-body-large-size: 16px;
  --edulite-text-body-large-line-height: 1.6;
  --edulite-text-body-large-weight: 400;
  --edulite-text-body-large-spacing: 0;
  
  --edulite-text-body-medium-size: 14px;
  --edulite-text-body-medium-line-height: 1.5;
  --edulite-text-body-medium-weight: 400;
  --edulite-text-body-medium-spacing: 0;
  
  --edulite-text-body-small-size: 12px;
  --edulite-text-body-small-line-height: 1.4;
  --edulite-text-body-small-weight: 400;
  --edulite-text-body-small-spacing: 0;
  
  --edulite-text-label-large-size: 14px;
  --edulite-text-label-large-line-height: 1.4;
  --edulite-text-label-large-weight: 500;
  --edulite-text-label-large-spacing: 0;
  
  --edulite-text-label-medium-size: 12px;
  --edulite-text-label-medium-line-height: 1.4;
  --edulite-text-label-medium-weight: 400;
  --edulite-text-label-medium-spacing: 0;
  
  --edulite-text-label-small-size: 10px;
  --edulite-text-label-small-line-height: 1.4;
  --edulite-text-label-small-weight: 400;
  --edulite-text-label-small-spacing: 0;
  
  /* Shape System */
  --edulite-shape-none: 0px;
  --edulite-shape-small: 8px;
  --edulite-shape-medium: 12px;
  --edulite-shape-large: 16px;
  --edulite-shape-extra-large: 24px;
  --edulite-shape-card: 20px;
  --edulite-shape-button: 12px;
  --edulite-shape-full: 9999px;
  
  /* Spacing System */
  --edulite-space-xs: 4px;
  --edulite-space-sm: 8px;
  --edulite-space-md: 16px;
  --edulite-space-lg: 24px;
  --edulite-space-xl: 32px;
  --edulite-space-2xl: 48px;
  --edulite-space-3xl: 64px;
  --edulite-space-4xl: 96px;
  
  /* Elevation System */
  --edulite-elevation-0: none;
  --edulite-elevation-1: 0 2px 4px rgba(0, 0, 0, 0.06);
  --edulite-elevation-2: 0 4px 12px rgba(0, 0, 0, 0.08);
  --edulite-elevation-3: 0 8px 24px rgba(0, 0, 0, 0.12);
  --edulite-elevation-4: 0 16px 48px rgba(0, 0, 0, 0.16);
  --edulite-elevation-5: 0 16px 48px rgba(0, 0, 0, 0.16);
  --edulite-elevation-colored: 0 8px 32px rgba(139, 123, 247, 0.25);
  --edulite-elevation-card: 0 4px 20px rgba(0, 0, 0, 0.08);
  --edulite-elevation-button: 0 4px 16px rgba(139, 123, 247, 0.3);
  
  /* Motion System */
  --edulite-duration-fast: 150ms;
  --edulite-duration-normal: 250ms;
  --edulite-duration-slow: 350ms;
  --edulite-duration-spring: 400ms;
  
  --edulite-easing-linear: linear;
  --edulite-easing-ease: ease;
  --edulite-easing-ease-in: ease-in;
  --edulite-easing-ease-out: ease-out;
  --edulite-easing-ease-in-out: ease-in-out;
  --edulite-easing-spring: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  
  /* Gradients */
  --edulite-gradient-primary: linear-gradient(135deg, #8B7BF7 0%, #B4A9FF 100%);
  --edulite-gradient-card: linear-gradient(180deg, #F0F0F3 0%, #FFFFFF 100%);
  --edulite-gradient-hero: linear-gradient(135deg, #FFB5A7 0%, #FEC89A 100%);
  --edulite-gradient-surface: linear-gradient(135deg, #FAFAFA 0%, #F0F0F3 100%);
}

/* Dark Mode Variables */
[data-theme="dark"] {
  --edulite-color-primary: #B4A9FF;
  --edulite-color-on-primary: #2B2D42;
  --edulite-color-primary-container: #6B5BD6;
  --edulite-color-on-primary-container: #FFFFFF;
  
  --edulite-color-secondary: #FFB5A7;
  --edulite-color-on-secondary: #2B2D42;
  --edulite-color-secondary-container: #FF8FA3;
  --edulite-color-on-secondary-container: #FFFFFF;
  
  --edulite-color-tertiary: #95E1D3;
  --edulite-color-on-tertiary: #2B2D42;
  --edulite-color-tertiary-container: #4ECDC4;
  --edulite-color-on-tertiary-container: #FFFFFF;
  
  --edulite-color-error: #FFB4AB;
  --edulite-color-on-error: #2B2D42;
  --edulite-color-error-container: #FF5449;
  --edulite-color-on-error-container: #FFFFFF;
  
  --edulite-color-background: #2B2D42;
  --edulite-color-on-background: #FAFAFA;
  --edulite-color-surface: #3D3F52;
  --edulite-color-on-surface: #FAFAFA;
  --edulite-color-surface-variant: #3D3F52;
  --edulite-color-on-surface-variant: #F0F0F3;
  
  --edulite-color-outline: #8D8F9A;
  --edulite-color-outline-variant: #3D3F52;
  
  --edulite-color-inverse-surface: #FAFAFA;
  --edulite-color-inverse-on-surface: #2B2D42;
  --edulite-color-inverse-primary: #8B7BF7;
  
  --edulite-color-surface-container-lowest: #2B2D42;
  --edulite-color-surface-container-highest: #3D3F52;
}

/* Component Styles */
.edulite-btn-primary {
  background: var(--edulite-color-primary);
  color: var(--edulite-color-on-primary);
  padding: 12px 24px;
  border-radius: var(--edulite-shape-button);
  font-size: var(--edulite-text-body-large-size);
  font-weight: 600;
  box-shadow: var(--edulite-elevation-button);
  transition: all var(--edulite-duration-normal) var(--edulite-easing-spring);
  border: none;
  cursor: pointer;
}

.edulite-btn-primary:hover {
  background: var(--edulite-purple-dark);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(139, 123, 247, 0.4);
}

.edulite-btn-secondary {
  background: var(--edulite-color-surface);
  color: var(--edulite-color-on-surface);
  border: 2px solid var(--edulite-color-outline-variant);
  padding: 12px 24px;
  border-radius: var(--edulite-shape-button);
  font-size: var(--edulite-text-body-large-size);
  font-weight: 600;
  transition: all var(--edulite-duration-normal) var(--edulite-easing-spring);
  cursor: pointer;
}

.edulite-btn-secondary:hover {
  background: var(--edulite-color-surface-variant);
  border-color: var(--edulite-color-outline);
  transform: translateY(-2px);
}

.edulite-card {
  background: var(--edulite-color-surface);
  border-radius: var(--edulite-shape-card);
  padding: 24px;
  box-shadow: var(--edulite-elevation-card);
  transition: all var(--edulite-duration-normal) var(--edulite-easing-spring);
}

.edulite-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--edulite-elevation-3);
}

.edulite-badge {
  background: var(--edulite-color-surface-variant);
  color: var(--edulite-color-on-surface);
  padding: 4px 12px;
  border-radius: var(--edulite-shape-full);
  font-size: var(--edulite-text-label-medium-size);
  font-weight: 600;
}

.edulite-badge-primary {
  background: var(--edulite-color-primary);
  color: var(--edulite-color-on-primary);
  padding: 4px 12px;
  border-radius: var(--edulite-shape-full);
  font-size: var(--edulite-text-label-medium-size);
  font-weight: 600;
}

/* Text Utilities */
.edulite-text-hero {
  font-family: var(--edulite-font-display);
  font-size: var(--edulite-text-hero-size);
  line-height: var(--edulite-text-hero-line-height);
  font-weight: var(--edulite-text-hero-weight);
  letter-spacing: var(--edulite-text-hero-spacing);
  color: var(--edulite-color-on-surface);
}

.edulite-text-display-large {
  font-family: var(--edulite-font-display);
  font-size: var(--edulite-text-display-large-size);
  line-height: var(--edulite-text-display-large-line-height);
  font-weight: var(--edulite-text-display-large-weight);
  letter-spacing: var(--edulite-text-display-large-spacing);
  color: var(--edulite-color-on-surface);
}

.edulite-text-headline-large {
  font-family: var(--edulite-font-primary);
  font-size: var(--edulite-text-headline-large-size);
  line-height: var(--edulite-text-headline-large-line-height);
  font-weight: var(--edulite-text-headline-large-weight);
  letter-spacing: var(--edulite-text-headline-large-spacing);
  color: var(--edulite-color-on-surface);
}

.edulite-text-body-large {
  font-family: var(--edulite-font-primary);
  font-size: var(--edulite-text-body-large-size);
  line-height: var(--edulite-text-body-large-line-height);
  font-weight: var(--edulite-text-body-large-weight);
  letter-spacing: var(--edulite-text-body-large-spacing);
  color: var(--edulite-color-on-surface-variant);
}

/* Animation Utilities */
.edulite-animate-fade-in {
  animation: edulite-fade-in var(--edulite-duration-normal) var(--edulite-easing-ease);
}

.edulite-animate-slide-up {
  animation: edulite-slide-up var(--edulite-duration-normal) var(--edulite-easing-spring);
}

.edulite-animate-float {
  animation: edulite-float 6s var(--edulite-easing-ease-in-out) infinite;
}

@keyframes edulite-fade-in {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes edulite-slide-up {
  from {
    opacity: 0;
    transform: translateY(32px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes edulite-float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-8px);
  }
}

/* Responsive Design */
@media (max-width: 640px) {
  :root {
    --edulite-text-hero-size: 40px;
    --edulite-text-display-large-size: 32px;
    --edulite-text-display-medium-size: 28px;
  }
}

@media (min-width: 1280px) {
  :root {
    --edulite-text-hero-size: 64px;
    --edulite-text-display-large-size: 48px;
  }
}