/*!**************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[10].use[3]!./styles/asteri-foundation.css ***!
  \**************************************************************************************************************************************************************************************************************************************************************************/
/* ==========================================
   ASTERI DESIGN LANGUAGE - FOUNDATIONAL CSS
   =========================================== 
   
   This file represents the core foundation of the Asteri Design Language,
   built to inspire and empower developers to create exceptional, accessible,
   and maintainable user experiences.
   
   Every class, every spacing value, every color choice has been carefully
   considered to create a system that will serve as the bedrock for innovation
   while maintaining unwavering consistency with our design principles.
   
   Built with love, precision, and a vision for the future.
   ========================================== */

/* Core Design Tokens - The Heart of Asteri */
:root {
  /* ==== ASTERI COLOR SYSTEM ====
     These colors are not just choices—they are the visual DNA of Asteri,
     carefully crafted to convey trust, intelligence, and elegance. */
     
  /* Primary - Asteri Purple: The soul of our brand */
  --asteri-purple: #523EFF;
  --asteri-purple-50: #F3F1FF;
  --asteri-purple-100: #E8E4FF;
  --asteri-purple-500: #523EFF;
  --asteri-purple-600: #4232E5;
  --asteri-purple-700: #3627CC;
  --asteri-purple-900: #1E2B7A;
  
  /* Legacy aliases for backward compatibility */
  --asteri-blue: #523EFF;
  --asteri-blue-500: #523EFF;
  --asteri-blue-600: #4232E5;
  --asteri-blue-700: #3627CC;
  
  /* Neutrals - The foundation of clarity and calm */
  --asteri-white: #FFFFFF;
  --asteri-gray-25: #FCFCFD;
  --asteri-gray-50: #F9FAFB;
  --asteri-gray-100: #F7FAFC;
  --asteri-gray-200: #EDF2F7;
  --asteri-gray-300: #E2E8F0;
  --asteri-gray-400: #CBD5E0;
  --asteri-gray-500: #A0AEC0;
  --asteri-gray-600: #718096;
  --asteri-gray-700: #4A5568;
  --asteri-gray-800: #2D3748;
  --asteri-gray-900: #1A202C;
  
  /* Semantic Colors - Clear communication through color */
  --asteri-success: #38A169;
  --asteri-success-light: #C6F6D5;
  --asteri-warning: #FF5733;
  --asteri-warning-light: #FEEBC8;
  --asteri-danger: #E53E3E;
  --asteri-danger-light: #FED7D7;
  --asteri-info: #3182CE;
  --asteri-info-light: #BEE3F8;
  
  /* ==== TYPOGRAPHY SYSTEM ====
     Inter font chosen for its exceptional legibility and modern character */
     
  --asteri-font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --asteri-font-size-xs: 0.75rem;    /* 12px */
  --asteri-font-size-sm: 0.875rem;   /* 14px */
  --asteri-font-size-base: 1rem;     /* 16px */
  --asteri-font-size-lg: 1.125rem;   /* 18px */
  --asteri-font-size-xl: 1.25rem;    /* 20px */
  --asteri-font-size-2xl: 1.5rem;    /* 24px */
  --asteri-font-size-3xl: 1.875rem;  /* 30px */
  --asteri-font-size-4xl: 2.25rem;   /* 36px */
  --asteri-font-size-5xl: 3rem;      /* 48px */
  
  --asteri-font-weight-normal: 400;
  --asteri-font-weight-medium: 500;
  --asteri-font-weight-semibold: 600;
  --asteri-font-weight-bold: 700;
  
  --asteri-line-height-tight: 1.25;
  --asteri-line-height-snug: 1.375;
  --asteri-line-height-normal: 1.5;
  --asteri-line-height-relaxed: 1.625;
  
  /* ==== SPACING SYSTEM ====
     Based on 4px increments for mathematical harmony and visual rhythm */
     
  --asteri-space-0: 0;
  --asteri-space-1: 0.25rem;  /* 4px */
  --asteri-space-2: 0.5rem;   /* 8px */
  --asteri-space-3: 0.75rem;  /* 12px */
  --asteri-space-4: 1rem;     /* 16px */
  --asteri-space-5: 1.25rem;  /* 20px */
  --asteri-space-6: 1.5rem;   /* 24px */
  --asteri-space-8: 2rem;     /* 32px */
  --asteri-space-10: 2.5rem;  /* 40px */
  --asteri-space-12: 3rem;    /* 48px */
  --asteri-space-16: 4rem;    /* 64px */
  --asteri-space-20: 5rem;    /* 80px */
  --asteri-space-24: 6rem;    /* 96px */
  --asteri-space-32: 8rem;    /* 128px */
  
  /* ==== RADIUS SYSTEM ====
     Consistent rounding creates visual harmony and modern appeal */
     
  --asteri-radius-none: 0;
  --asteri-radius-sm: 0.25rem;   /* 4px */
  --asteri-radius-base: 0.5rem;  /* 8px */
  --asteri-radius-md: 0.5rem;    /* 8px */
  --asteri-radius-lg: 1rem;      /* 16px */
  --asteri-radius-xl: 1.5rem;    /* 24px */
  --asteri-radius-2xl: 2rem;     /* 32px */
  --asteri-radius-full: 9999px;
  
  /* ==== ELEVATION SYSTEM ====
     Subtle shadows that enhance hierarchy without overwhelming */
     
  --asteri-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --asteri-shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --asteri-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --asteri-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --asteri-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --asteri-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --asteri-shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
  
  /* ==== TRANSITION SYSTEM ====
     Smooth, natural motion that feels responsive and delightful */
     
  --asteri-transition-fast: 150ms ease-in-out;
  --asteri-transition-base: 200ms ease-in-out;
  --asteri-transition-slow: 300ms ease-in-out;
  --asteri-transition-slower: 500ms ease-in-out;
  
  /* Easing curves for natural motion */
  --asteri-ease-in: cubic-bezier(0.4, 0, 1, 1);
  --asteri-ease-out: cubic-bezier(0, 0, 0.2, 1);
  --asteri-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  
  /* ==== Z-INDEX SYSTEM ====
     Logical layering for predictable stacking contexts */
     
  --asteri-z-auto: auto;
  --asteri-z-0: 0;
  --asteri-z-10: 10;
  --asteri-z-20: 20;
  --asteri-z-30: 30;
  --asteri-z-40: 40;
  --asteri-z-50: 50;
  --asteri-z-tooltip: 1000;
  --asteri-z-modal: 1010;
  --asteri-z-toast: 1020;
  --asteri-z-max: 2147483647;
}

/* ==== FOUNDATIONAL COMPONENT CLASSES ====
   These classes embody the Asteri Design Language principles
   and serve as building blocks for all UI components. */

/* Typography Foundation */
.asteri-text {
  font-family: var(--asteri-font-family);
  color: var(--asteri-gray-700);
  line-height: var(--asteri-line-height-normal);
  font-feature-settings: 'cv11', 'ss01';
  font-variant-numeric: tabular-nums;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.asteri-heading {
  /* Text base styles */
  font-family: var(--asteri-font-family);
  line-height: var(--asteri-line-height-normal);
  font-feature-settings: 'cv11', 'ss01';
  font-variant-numeric: tabular-nums;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  
  /* Heading specific styles */
  font-weight: var(--asteri-font-weight-semibold);
  color: var(--asteri-gray-800);
  line-height: var(--asteri-line-height-tight);
  letter-spacing: -0.025em;
}

/* Layout Foundation */
.asteri-container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--asteri-space-4);
  padding-right: var(--asteri-space-4);
}

.asteri-section {
  padding-top: var(--asteri-space-16);
  padding-bottom: var(--asteri-space-16);
}

.asteri-card {
  background: linear-gradient(135deg, var(--asteri-white) 0%, var(--asteri-gray-25) 100%);
  border-radius: var(--asteri-radius-lg);
  border: 1px solid var(--asteri-gray-200);
  box-shadow: var(--asteri-shadow-base);
  padding: var(--asteri-space-6);
  transition: all var(--asteri-transition-base);
}

.asteri-card:hover {
  background: linear-gradient(135deg, var(--asteri-gray-25) 0%, var(--asteri-gray-50) 100%);
  box-shadow: var(--asteri-shadow-md);
  transform: translateY(-2px);
}

/* Interactive Elements Foundation */
.asteri-interactive {
  cursor: pointer;
  transition: all var(--asteri-transition-base);
  -webkit-tap-highlight-color: rgba(51, 102, 255, 0.1);
}

.asteri-interactive:focus-visible {
  outline: 2px solid var(--asteri-blue);
  outline-offset: 2px;
  border-radius: var(--asteri-radius-sm);
}

.asteri-interactive:disabled {
  cursor: not-allowed;
  opacity: 0.5;
  transform: none !important;
}

/* Button Foundation - The Heart of Interaction */
.asteri-btn {
  /* Interactive base styles */
  cursor: pointer;
  transition: all var(--asteri-transition-base);
  -webkit-tap-highlight-color: rgba(51, 102, 255, 0.1);
  
  /* Text base styles */
  font-family: var(--asteri-font-family);
  color: var(--asteri-gray-700);
  line-height: var(--asteri-line-height-normal);
  font-feature-settings: 'cv11', 'ss01';
  font-variant-numeric: tabular-nums;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  
  /* Button specific styles */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--asteri-space-2);
  font-weight: var(--asteri-font-weight-medium);
  font-size: var(--asteri-font-size-base);
  border-radius: var(--asteri-radius-base);
  border: none;
  padding: var(--asteri-space-2) var(--asteri-space-6);
  min-height: 44px; /* Touch target compliance */
  min-width: 44px;
  text-decoration: none;
  position: relative;
  overflow: hidden;
}

.asteri-btn:focus-visible {
  outline: 2px solid var(--asteri-blue);
  outline-offset: 2px;
  border-radius: var(--asteri-radius-sm);
}

.asteri-btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
  transform: none !important;
}

.asteri-btn-primary {
  /* Inherit all .asteri-btn styles */
  cursor: pointer;
  transition: all var(--asteri-transition-base);
  -webkit-tap-highlight-color: rgba(51, 102, 255, 0.1);
  font-family: var(--asteri-font-family);
  font-feature-settings: 'cv11', 'ss01';
  font-variant-numeric: tabular-nums;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--asteri-space-2);
  font-weight: var(--asteri-font-weight-medium);
  font-size: var(--asteri-font-size-base);
  line-height: var(--asteri-line-height-normal);
  border-radius: var(--asteri-radius-base);
  border: none;
  padding: var(--asteri-space-2) var(--asteri-space-6);
  min-height: 44px;
  min-width: 44px;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  
  /* Primary specific styles */
  background: linear-gradient(135deg, var(--asteri-blue) 0%, var(--asteri-blue-600) 100%);
  color: var(--asteri-white);
  box-shadow: 0 2px 4px rgba(51, 102, 255, 0.2);
}

.asteri-btn-primary:hover {
  background: linear-gradient(135deg, var(--asteri-blue-600) 0%, var(--asteri-blue-700) 100%);
  box-shadow: 0 4px 8px rgba(51, 102, 255, 0.3);
  transform: translateY(-1px);
}

.asteri-btn-primary:focus-visible {
  outline: 2px solid var(--asteri-blue);
  outline-offset: 2px;
  border-radius: var(--asteri-radius-sm);
}

.asteri-btn-primary:disabled {
  cursor: not-allowed;
  opacity: 0.5;
  transform: none !important;
}

.asteri-btn-secondary {
  /* Inherit all .asteri-btn styles */
  cursor: pointer;
  transition: all var(--asteri-transition-base);
  -webkit-tap-highlight-color: rgba(51, 102, 255, 0.1);
  font-family: var(--asteri-font-family);
  font-feature-settings: 'cv11', 'ss01';
  font-variant-numeric: tabular-nums;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--asteri-space-2);
  font-weight: var(--asteri-font-weight-medium);
  font-size: var(--asteri-font-size-base);
  line-height: var(--asteri-line-height-normal);
  border-radius: var(--asteri-radius-base);
  padding: var(--asteri-space-2) var(--asteri-space-6);
  min-height: 44px;
  min-width: 44px;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  
  /* Secondary specific styles */
  background: linear-gradient(135deg, var(--asteri-white) 0%, var(--asteri-gray-50) 100%);
  color: var(--asteri-gray-700);
  border: 1px solid var(--asteri-gray-300);
  box-shadow: var(--asteri-shadow-sm);
}

.asteri-btn-secondary:hover {
  background: linear-gradient(135deg, var(--asteri-gray-50) 0%, var(--asteri-gray-100) 100%);
  border-color: var(--asteri-gray-400);
  box-shadow: var(--asteri-shadow-base);
  transform: translateY(-1px);
}

.asteri-btn-secondary:focus-visible {
  outline: 2px solid var(--asteri-blue);
  outline-offset: 2px;
  border-radius: var(--asteri-radius-sm);
}

.asteri-btn-secondary:disabled {
  cursor: not-allowed;
  opacity: 0.5;
  transform: none !important;
}

/* Form Foundation */
.asteri-input {
  /* Text base styles */
  font-family: var(--asteri-font-family);
  color: var(--asteri-gray-700);
  line-height: var(--asteri-line-height-normal);
  font-feature-settings: 'cv11', 'ss01';
  font-variant-numeric: tabular-nums;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  
  /* Input specific styles */
  display: block;
  width: 100%;
  font-size: var(--asteri-font-size-base);
  background-color: var(--asteri-white);
  border: 1px solid var(--asteri-gray-300);
  border-radius: var(--asteri-radius-base);
  padding: var(--asteri-space-3) var(--asteri-space-4);
  transition: all var(--asteri-transition-fast);
  box-shadow: var(--asteri-shadow-sm);
}

.asteri-input:focus {
  outline: none;
  border-color: var(--asteri-blue);
  box-shadow: 0 0 0 3px rgba(51, 102, 255, 0.1);
}

.asteri-input::placeholder {
  color: var(--asteri-gray-400);
  opacity: 1;
}

/* Accessibility Enhancements */
.asteri-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
  .asteri-btn-primary {
    border: 2px solid var(--asteri-blue-900);
  }
  
  .asteri-btn-secondary {
    border: 2px solid var(--asteri-gray-800);
  }
  
  .asteri-card {
    border: 2px solid var(--asteri-gray-400);
  }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  
  .asteri-btn:hover,
  .asteri-card:hover {
    transform: none;
  }
}

/* Dark Mode Foundation (Future-Ready) */
@media (prefers-color-scheme: dark) {
  :root {
    --asteri-white: #1A202C;
    --asteri-gray-50: #2D3748;
    --asteri-gray-100: #4A5568;
    --asteri-gray-900: #F7FAFC;
  }
}

/* Print Styles */
@media print {
  .asteri-btn,
  .asteri-interactive {
    background: transparent !important;
    color: black !important;
    box-shadow: none !important;
  }
  
  .asteri-card {
    box-shadow: none !important;
    border: 1px solid black !important;
  }
}

/* ==========================================
   UTILITY CLASSES FOR RAPID DEVELOPMENT
   ========================================== */

/* Spacing Utilities */
.m-0 { margin: var(--asteri-space-0); }
.m-1 { margin: var(--asteri-space-1); }
.m-2 { margin: var(--asteri-space-2); }
.m-3 { margin: var(--asteri-space-3); }
.m-4 { margin: var(--asteri-space-4); }
.m-5 { margin: var(--asteri-space-5); }
.m-6 { margin: var(--asteri-space-6); }
.m-8 { margin: var(--asteri-space-8); }
.m-10 { margin: var(--asteri-space-10); }
.m-12 { margin: var(--asteri-space-12); }
.m-16 { margin: var(--asteri-space-16); }

.p-0 { padding: var(--asteri-space-0); }
.p-1 { padding: var(--asteri-space-1); }
.p-2 { padding: var(--asteri-space-2); }
.p-3 { padding: var(--asteri-space-3); }
.p-4 { padding: var(--asteri-space-4); }
.p-5 { padding: var(--asteri-space-5); }
.p-6 { padding: var(--asteri-space-6); }
.p-8 { padding: var(--asteri-space-8); }
.p-10 { padding: var(--asteri-space-10); }
.p-12 { padding: var(--asteri-space-12); }
.p-16 { padding: var(--asteri-space-16); }

/* Typography Utilities */
.text-xs { font-size: var(--asteri-font-size-xs); }
.text-sm { font-size: var(--asteri-font-size-sm); }
.text-base { font-size: var(--asteri-font-size-base); }
.text-lg { font-size: var(--asteri-font-size-lg); }
.text-xl { font-size: var(--asteri-font-size-xl); }
.text-2xl { font-size: var(--asteri-font-size-2xl); }
.text-3xl { font-size: var(--asteri-font-size-3xl); }
.text-4xl { font-size: var(--asteri-font-size-4xl); }
.text-5xl { font-size: var(--asteri-font-size-5xl); }

/* Color Utilities */
.text-primary { color: var(--asteri-blue); }
.text-success { color: var(--asteri-success); }
.text-warning { color: var(--asteri-warning); }
.text-danger { color: var(--asteri-danger); }
.text-info { color: var(--asteri-info); }
.text-muted { color: var(--asteri-gray-500); }
.text-subtle { color: var(--asteri-gray-400); }

.bg-primary { background-color: var(--asteri-blue); }
.bg-success { background-color: var(--asteri-success); }
.bg-warning { background-color: var(--asteri-warning); }
.bg-danger { background-color: var(--asteri-danger); }
.bg-info { background-color: var(--asteri-info); }

/* ==========================================
   DEVELOPER GUIDELINES
   ========================================== 
   
   This foundation is built with the following principles:
   
   1. **Consistency Above All**: Every spacing, color, and typography choice
      follows the Asteri Design Language specifications exactly.
      
   2. **Accessibility First**: All components meet WCAG 2.1 AA standards
      and include support for screen readers, keyboard navigation, and
      reduced motion preferences.
      
   3. **Performance Optimized**: CSS custom properties enable efficient
      theme switching and reduce bundle size through variable reuse.
      
   4. **Mobile-First**: Every component is designed to work beautifully
      on mobile devices first, then enhanced for larger screens.
      
   5. **Future-Proof**: The system is designed to evolve gracefully,
      with extensible patterns and clear migration paths.
      
   6. **Developer Joy**: Clear naming conventions, logical organization,
      and comprehensive documentation make this system a pleasure to use.
   
   Remember: This is not just CSS—it's the foundation upon which we build
   exceptional user experiences that will inspire and delight for years to come.
   
   Built with love for the Asteri team and the future of design systems.
   ========================================== */