/**
 * Main CSS Entry Point
 * Well+Therme v2.0 - "Be Well. Have Fun"
 * 
 * This file imports all design tokens and serves as the entry point
 * for the complete design system.
 * 
 * @author Well+Therme Team
 * @version 2.0.0
 */

/* ============================================
   DESIGN TOKENS
   ============================================ */

/* Colors - Brand and Product Collection Colors */
@import url('tokens/colors.css');

/* Typography - Space Grotesk + Inter */
@import url('tokens/typography.css');

/* Spacing - 8pt Grid System */
@import url('tokens/spacing.css');

/* Shadows - Organic, soft shadows */
@import url('tokens/shadows.css');

/* Animations - Smooth, natural motion */
@import url('tokens/animations.css');

/* ============================================
   COMPONENTS
   ============================================ */

/* Navigation - Sticky header */
@import url('components/navigation.css');

/* Buttons - All button variants */
@import url('components/buttons.css');

/* Cards - Product, feature, testimonial cards */
@import url('components/cards.css');

/* Forms - Inputs and form elements */
@import url('components/forms.css');

/* Modal - Dialogs and overlays */
@import url('components/modal.css');

/* Trust Badges - Trust indicators */
@import url('components/trust-badges.css');

/* Sticky CTA - Mobile-only CTA bar */
@import url('components/sticky-cta.css');

/* ============================================
   SECTIONS
   ============================================ */

/* Hero - Split design */
@import url('sections/hero.css');

/* Hero V2 - Premium Layered Editorial */
@import url('sections/hero-v2.css');

/* Products - Product collection grid */
@import url('sections/products.css');

/* Features - Three Pillars */
@import url('sections/features.css');

/* Testimonials - Social proof */
@import url('sections/testimonials.css');

/* CTA - Call to action */
@import url('sections/cta.css');

/* Footer - Complete footer */
@import url('sections/footer.css');

/* ============================================
   BASE RESET & GLOBAL STYLES
   ============================================ */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-relaxed);
  color: var(--text-primary);
  background-color: var(--bg-primary);
}

/* ============================================
   LAYOUT UTILITIES
   ============================================ */

.container {
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

.container--narrow {
  max-width: 720px;
}

.section {
  padding: var(--section-padding-y) 0;
}

.section--sm {
  padding: var(--space-8) 0;
}

.section--lg {
  padding: var(--space-11) 0;
}

/* ============================================
   VISIBILITY & ACCESSIBILITY
   ============================================ */

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

.sr-only--focusable:focus {
  position: static;
  width: auto;
  height: auto;
  padding: inherit;
  margin: inherit;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

/* Skip Link */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--brand-dark);
  color: var(--text-inverse);
  padding: var(--space-2) var(--space-4);
  text-decoration: none;
  z-index: 10000;
  transition: top var(--duration-fast) var(--ease-out);
}

.skip-link:focus {
  top: 0;
}

/* Focus Visible */
:focus-visible {
  outline: 3px solid var(--brand-bright);
  outline-offset: 3px;
}

/* ============================================
   SELECTION & SCROLLBAR
   ============================================ */

::selection {
  background: var(--brand-bright);
  color: var(--text-inverse);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
  background: var(--neutral-400);
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--neutral-500);
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--neutral-400) var(--bg-secondary);
}

/* ============================================
   PLACEHOLDER
   ============================================ */

::placeholder {
  color: var(--text-placeholder);
  opacity: 1;
}

/* ============================================
   REDUCED MOTION
   ============================================ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
  .nav,
  .footer,
  .cta {
    display: none;
  }
  
  * {
    background: white !important;
    color: black !important;
  }
}