/* Biobalance Sports Nutrition - Core Stylesheet */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,600;0,700;0,800;0,900;1,700;1,800&family=Inter:wght@300;400;500;600;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');

:root {
  --color-surface-base: #0D0F12;
  --color-surface: #111317;
  --color-surface-raised: #14171D;
  --color-surface-overlay: #1C2028;
  --color-surface-elevated: #252B36;
  --color-volt: #CCFF00;
  --color-cyan: #00F0FF;
  --color-emerald: #00E699;
  --color-crimson: #FF2A4D;
  --color-text-primary: #FFFFFF;
  --color-text-secondary: #9CA3AF;
  --color-text-muted: #525C6A;
  --color-border-subtle: #242A35;
}

html {
  scroll-behavior: smooth;
  color-scheme: dark;
}

body {
  background-color: var(--color-surface-base);
  color: #e2e2e6;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
}

/* Typography styles */
.font-display-hero {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.font-headline-xl {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  letter-spacing: 0.03em;
}

.font-headline-lg {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.font-headline-md {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.font-headline-sm {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.font-label-caps {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.font-label-metric {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  letter-spacing: -0.01em;
}

/* Reticle & Hologram Elements */
.reticle-corner-tl {
  border-top: 2px solid var(--color-volt);
  border-left: 2px solid var(--color-volt);
}
.reticle-corner-tr {
  border-top: 2px solid var(--color-volt);
  border-right: 2px solid var(--color-volt);
}
.reticle-corner-bl {
  border-bottom: 2px solid var(--color-volt);
  border-left: 2px solid var(--color-volt);
}
.reticle-corner-br {
  border-bottom: 2px solid var(--color-volt);
  border-right: 2px solid var(--color-volt);
}

.hologram-shimmer {
  background: linear-gradient(135deg, rgba(204, 255, 0, 0.1) 0%, rgba(0, 240, 255, 0.15) 50%, rgba(0, 230, 153, 0.1) 100%);
  background-size: 200% 200%;
  animation: shimmer 4s ease infinite;
}

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

@keyframes scanline {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(1000%); }
}

.animate-scanline {
  animation: scanline 2.5s ease-in-out infinite;
}

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

::-webkit-scrollbar-track {
  background: #0D0F12;
}

::-webkit-scrollbar-thumb {
  background: #242A35;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #CCFF00;
}

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