/* ============================================================
   YUV.AI — BASE & UTILITIES
   Minimal reset + brand utility classes (glass, gradient text,
   phoenix backgrounds). Tokens must load before this file.
   ============================================================ */

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-relaxed);
  color: var(--text-primary);
  background: var(--bg-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: rgba(var(--glow-magenta), 0.28); }

a { color: var(--text-link); text-decoration: none; }

/* ---- Brand utilities ---- */
.gradient-text {
  background: var(--gradient-fly);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.gradient-text-phoenix {
  background: var(--gradient-phoenix);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.text-glow { text-shadow: var(--glow-text); }

/* ---- Highlight treatments (for emphasizing words) ---- */
/* Soft phoenix highlighter swipe behind a word; wraps cleanly across lines */
.hl {
  background: linear-gradient(118deg, rgba(22,214,232,0.30), rgba(255,46,160,0.32));
  border-radius: 0.28em;
  padding: 0.04em 0.22em;
  margin: 0 -0.04em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
/* Gradient marker underline sitting under the text baseline */
.hl-underline {
  background-image: var(--gradient-fly);
  background-repeat: no-repeat;
  background-position: 0 92%;
  background-size: 100% 0.30em;
  padding: 0 0.04em;
}
/* Solid brand highlighter (magenta), good on dark or light */
.hl-solid {
  background: var(--brand-primary);
  color: #fff;
  border-radius: 0.22em;
  padding: 0.02em 0.2em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
/* Handwriting accent — for scribbled annotations & callouts */
.scribble {
  font-family: var(--font-script);
  font-weight: 700;
  font-size: 1.18em;
  color: var(--magenta-500);
  line-height: 1;
}
:root[data-theme="dark"] .scribble { color: var(--magenta-300); }

/* Liquid glass material */
.glass {
  background: var(--glass-fill);
  -webkit-backdrop-filter: var(--glass-backdrop);
  backdrop-filter: var(--glass-backdrop);
  border: var(--border-hairline) solid var(--glass-stroke);
  box-shadow: var(--glass-shadow);
}
.glass-tinted { background-image: linear-gradient(var(--glass-tint), var(--glass-tint)); }

/* Phoenix backgrounds */
.bg-phoenix { background: var(--gradient-phoenix); }
.bg-ember   { background: var(--gradient-ember); }
.bg-aurora  { background: var(--gradient-aurora); }
.bg-ink     { background: var(--gradient-ink); }

/* Animated phoenix glow blob (decorative) */
.bg-glow-field {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.bg-glow-field::before,
.bg-glow-field::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  filter: blur(80px);
  opacity: 0.55;
  z-index: -1;
}
.bg-glow-field::before {
  width: 46%; aspect-ratio: 1; top: -10%; left: -8%;
  background: radial-gradient(circle, var(--phoenix-magenta), transparent 70%);
}
.bg-glow-field::after {
  width: 50%; aspect-ratio: 1; bottom: -16%; right: -10%;
  background: radial-gradient(circle, var(--phoenix-cyan), transparent 70%);
}

@media (prefers-reduced-motion: no-preference) {
  .float-slow { animation: yuv-float 7s var(--ease-emphasized) infinite; }
}
@keyframes yuv-float {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-10px); }
}