/* Font Imports */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap');

:root {
  --primary: #10a37f;
  --background-light: #f6f6f8;
  --background-dark: #101622;
}

/* Base Styles */
body {
  font-family: 'Inter', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6, .font-display {
  font-family: 'Space Grotesk', sans-serif;
}

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
}

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

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

::-webkit-scrollbar-thumb {
  background: #3b4354;
  border-radius: 4px;
}

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

/* Utilities */
.layout-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.layout-content-container {
  width: 100%;
  margin: 0 auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (min-width: 640px) {
  .layout-content-container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .layout-content-container {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

/* Form styles normalization */
input[type="text"],
input[type="email"],
input[type="password"],
textarea,
select {
  appearance: none;
  background-color: transparent;
}

/* Transitions */
.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

/* 
==========================================================================
STYLE GUIDE & TESTING
==========================================================================

Colors:
- Primary: #135bec (Tailwind: text-primary, bg-primary, border-primary)
- Background Dark: #101622 (bg-background-dark)
- Background Light: #f6f6f8 (bg-background-light)
- Text on Dark: white or slate-400
- Text on Light: slate-900 or slate-600

Typography:
- Headings: Space Grotesk (font-display)
- Body: Inter (font-body)

Layout:
- Wrapper: .layout-container (flex col min-h-screen)
- Content: .layout-content-container (max-w-[1200px] centered)

Components:
- Buttons: rounded-full, h-10/12, px-5/8, font-bold
- Cards: rounded-2xl, border-white/10, bg-white/5, backdrop-blur-sm
- Inputs: rounded-lg, border-white/10, bg-black/20, focus:border-primary

Accessibility:
- Ensure all images have alt text
- Ensure interactive elements have focus states (handled by Tailwind focus: ring)
- Contrast checked for slate-400 on background-dark
*/