/* ═══════════════════════════════════════════════════════════════════════════
   Kronn Reset & Global Styles
   Moved from index.html <style> block for proper CSS file management.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Font faces (self-hosted, GDPR compliant) ───────────────────────────── */
@font-face { font-family: 'Inter'; font-weight: 400; font-display: swap; src: url('/fonts/inter-400.ttf') format('truetype'); }
@font-face { font-family: 'Inter'; font-weight: 500; font-display: swap; src: url('/fonts/inter-500.ttf') format('truetype'); }
@font-face { font-family: 'Inter'; font-weight: 600; font-display: swap; src: url('/fonts/inter-600.ttf') format('truetype'); }
@font-face { font-family: 'Inter'; font-weight: 700; font-display: swap; src: url('/fonts/inter-700.ttf') format('truetype'); }
@font-face { font-family: 'JetBrains Mono'; font-weight: 400; font-display: swap; src: url('/fonts/jetbrains-mono-400.ttf') format('truetype'); }
@font-face { font-family: 'JetBrains Mono'; font-weight: 500; font-display: swap; src: url('/fonts/jetbrains-mono-500.ttf') format('truetype'); }
@font-face { font-family: 'JetBrains Mono'; font-weight: 600; font-display: swap; src: url('/fonts/jetbrains-mono-600.ttf') format('truetype'); }
@font-face { font-family: 'JetBrains Mono'; font-weight: 700; font-display: swap; src: url('/fonts/jetbrains-mono-700.ttf') format('truetype'); }

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

/* ── Body + Aurora ambient ──────────────────────────────────────────────
   The dark default carries the Lila Arcade aurora gradient (magenta from
   bottom, electric violet from top-right) baked into the body background,
   layered above the solid bg-base. Multi-bg approach (vs ::before fixed)
   avoids any stacking-context drama and works regardless of how children
   are positioned. background-attachment: fixed keeps it stable on scroll.
   Light + secret themes override below (each carries its own ambient).  */
body {
  font-family: var(--kr-font-sans);
  background:
    /* Magenta bumped from 0.14 → 0.22 so the pink/rose dominates the
       ambient on dark default (matches the visual balance of the pitch
       site where pink is the primary accent and lime is a signature
       spot). Electric violet stays as a secondary tint up-right.       */
    radial-gradient(ellipse at bottom, rgba(255, 27, 168, 0.22) 0%, transparent 55%),
    radial-gradient(ellipse at top right, rgba(139, 92, 246, 0.14) 0%, transparent 50%),
    var(--kr-bg-base);
  background-attachment: fixed;
  color: var(--kr-text-primary);
  -webkit-font-smoothing: antialiased;
}

:root[data-theme="light"] body,
:root[data-theme="matrix"] body,
:root[data-theme="gotham"] body,
:root[data-theme="sakura"] body {
  background: var(--kr-bg-base);
}

code, .mono { font-family: var(--kr-font-mono); }

/* ── Scrollbar ──────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--kr-border-medium); border-radius: var(--kr-r-xs); }

/* ── Selection ──────────────────────────────────────────────────────────── */
::selection { background: rgba(var(--kr-accent-rgb), 0.3); }

/* ── Focus ──────────────────────────────────────────────────────────────── */
*:focus-visible { outline: 2px solid var(--kr-accent); outline-offset: 2px; }

/* ── Keyframes ──────────────────────────────────────────────────────────── */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

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