/**
 * BabySNEK Webapp 2.0 - Base Styles
 * Reset, typography, and global styles
 * Typography: Jua (display/headlines) + Space Grotesk (body)
 */

/* ========================================
   CSS RESET & NORMALIZE
   ======================================== */

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

html {
  font-size: calc(16px * var(--ui-scale, 1));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  min-height: 100vh;
  overflow-x: hidden;
  transition: background-color 0.5s ease, color 0.5s ease;
  position: relative;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

body::before,
body::after {
  content: '';
  position: fixed;
  inset: -20%;
  pointer-events: none;
  z-index: 0;
  opacity: var(--aurora-opacity, 0.5);
  filter: blur(var(--aurora-blur, 60px)) saturate(120%);
  transform: translateZ(0);
  will-change: transform;
}

body::before {
  background:
    radial-gradient(600px 420px at 12% 12%, var(--aurora-1, rgba(255, 194, 232, 0.2)), transparent 65%),
    radial-gradient(720px 520px at 88% 18%, var(--aurora-2, rgba(167, 216, 240, 0.2)), transparent 65%),
    radial-gradient(820px 560px at 50% 88%, var(--aurora-3, rgba(4, 207, 255, 0.16)), transparent 60%);
  animation: aurora-drift 18s ease-in-out infinite alternate;
}

body::after {
  background:
    radial-gradient(540px 380px at 20% 70%, var(--aurora-2, rgba(167, 216, 240, 0.18)), transparent 65%),
    radial-gradient(780px 520px at 80% 60%, var(--aurora-3, rgba(4, 207, 255, 0.14)), transparent 65%),
    radial-gradient(520px 360px at 55% 10%, var(--aurora-1, rgba(255, 194, 232, 0.18)), transparent 60%);
  animation: aurora-drift-alt 24s ease-in-out infinite alternate;
}

body > * {
  position: relative;
  z-index: 1;
}

@keyframes aurora-drift {
  0% { transform: translate3d(-4%, -2%, 0) scale(1); }
  50% { transform: translate3d(2%, 3%, 0) scale(1.03); }
  100% { transform: translate3d(4%, -3%, 0) scale(1.01); }
}

@keyframes aurora-drift-alt {
  0% { transform: translate3d(3%, 2%, 0) scale(1.02); }
  50% { transform: translate3d(-2%, -3%, 0) scale(1); }
  100% { transform: translate3d(-4%, 3%, 0) scale(1.03); }
}

/* ========================================
   TYPOGRAPHY
   ======================================== */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: var(--line-height-tight);
  margin-bottom: 0.5em;
}

h1 { font-size: clamp(2.5rem, 8vw, 5rem); }
h2 { font-size: clamp(2rem, 6vw, 3.5rem); }
h3 { font-size: var(--font-size-2xl); }
h4 { font-size: var(--font-size-xl); }
h5 { font-size: var(--font-size-lg); }
h6 { font-size: var(--font-size-md); }

p {
  margin-bottom: 1em;
  line-height: 1.7;
  font-weight: 500;
}

strong, b { font-weight: 700; }
em, i { font-style: italic; }
small { font-size: var(--font-size-xs); }

/* Display font class */
.font-display { font-family: var(--font-display); font-weight: 800; }
.font-body { font-family: var(--font-body); }

/* Text gradient (neon cyan to pink) */
.text-gradient {
  background: linear-gradient(135deg, var(--snek-neon) 0%, var(--snek-pink) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ========================================
   LINKS
   ======================================== */

a {
  text-decoration: none;
  transition: color 0.2s ease, opacity 0.2s ease;
}

a:focus-visible {
  outline: 2px solid var(--focus-ring, var(--snek-neon));
  outline-offset: 2px;
  border-radius: 2px;
}

/* ========================================
   SELECTION
   ======================================== */

::selection { background-color: var(--snek-neon); color: black; }
::-moz-selection { background-color: var(--snek-neon); color: black; }

/* ========================================
   SCROLLBAR
   ======================================== */

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }

/* ========================================
   FOCUS STATES
   ======================================== */

:focus-visible { outline: 2px solid var(--focus-ring, var(--snek-neon)); outline-offset: 2px; }

/* ========================================
   ACCESSIBILITY OPTIONS
   ======================================== */

html.reduce-motion {
  scroll-behavior: auto;
}

html.reduce-motion *, html.reduce-motion *::before, html.reduce-motion *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
}

html.underline-links a {
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 2px;
}

html.readable-font {
  --font-body: var(--font-fallback);
  --font-display: var(--font-fallback);
  --font-primary: var(--font-fallback);
}

html.high-contrast :focus-visible {
  outline: 3px solid var(--accent-primary, var(--snek-neon));
  outline-offset: 3px;
}

/* ========================================
   IMAGES & MEDIA
   ======================================== */

img { max-width: 100%; height: auto; display: block; }
ul, ol { list-style-position: inside; margin-bottom: 1em; }
code, pre { font-family: 'Courier New', monospace; font-size: 0.85em; }

/* ========================================
   UTILITY CLASSES
   ======================================== */

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.hidden { display: none !important; }
.text-sm { font-size: 0.875rem; }
.text-xs { font-size: 0.75rem; }
.text-lg { font-size: 1.125rem; }
.text-xl { font-size: 1.25rem; }
.tracking-widest { letter-spacing: 0.1em; }
.tracking-wider { letter-spacing: 0.05em; }
.uppercase { text-transform: uppercase; }
.italic { font-style: italic; }
.font-bold { font-weight: 700; }
.break-all { word-break: break-all; }

/* Brand split (BabySNEK) */
.brand-split { display: inline-flex; }
.brand-baby { color: var(--snek-pink); }
.brand-snek { color: var(--snek-neon); }

/* ========================================
   iOS INPUT ZOOM PREVENTION
   ======================================== */

@media screen and (max-width: 768px) {
  input, select, textarea {
    font-size: 16px;
  }
}

/* ========================================
   PREFERS 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;
  }
}

.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;
}