/* ============================================================
   base.css – globale stiler og CSS-variabler
   ============================================================ */

:root {
  --bg:           #FFF8F0;
  --surface:      #FFFFFF;
  --math:         #5B8AF5;
  --math-light:   #EEF3FF;
  --lang:         #FF8C42;
  --lang-light:   #FFF3EB;
  --nature:       #3DBE7A;
  --nature-light: #EDFBF3;
  --draw:         #FF6B9D;
  --draw-light:   #FFF0F6;
  --star:         #FFD700;
  --text:         #2D2D44;
  --text-med:     #7A7A99;
  --radius:       24px;
  --radius-sm:    14px;
  --shadow:       0 8px 32px rgba(0,0,0,.10);
  --shadow-sm:    0 4px 12px rgba(0,0,0,.08);
  --font:         'Nunito', sans-serif;
  --tap-min:      64px;
  --anim-speed:   1;
}

/* Høy kontrast */
.hc {
  --bg:           #111111;
  --surface:      #1E1E1E;
  --text:         #FFFFFF;
  --text-med:     #CCCCCC;
  --math-light:   #1a2340;
  --lang-light:   #2a1a0a;
  --nature-light: #0a2015;
  --draw-light:   #2a0f1a;
}

/* Ingen animasjoner */
.no-anim * {
  animation-duration: 0.001ms !important;
  transition-duration: 0.001ms !important;
}

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

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
  transition: background .3s, color .3s;
}

/* ── Knapper ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font); font-weight: 800; font-size: 18px;
  padding: 16px 32px; border-radius: 100px; border: none; cursor: pointer;
  min-height: var(--tap-min); min-width: var(--tap-min);
  transition: transform .15s, box-shadow .15s; text-decoration: none;
}
.btn:hover  { transform: translateY(-2px) scale(1.03); }
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--math); color: #fff; box-shadow: 0 6px 20px rgba(91,138,245,.4); }
.btn-success { background: var(--nature); color: #fff; box-shadow: 0 6px 20px rgba(61,190,122,.4); }
.btn-outline  { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
.btn-danger   { background: #EF476F; color: #fff; }
.btn-sm       { font-size: 15px; padding: 12px 24px; min-height: 48px; }

/* ── Skjult (tilgjengelighet) ── */
.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;
}

/* ── Fokusring ── */
*:focus-visible {
  outline: 4px solid var(--math);
  outline-offset: 3px;
  border-radius: 8px;
}

/* ── Toast ── */
.toast {
  position: fixed; bottom: 90px; left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--text); color: white;
  padding: 14px 24px; border-radius: 100px;
  font-weight: 700; font-size: 16px;
  opacity: 0; transition: all .3s; z-index: 999; white-space: nowrap;
  pointer-events: none;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── Loader ── */
.loader {
  display: inline-block; width: 40px; height: 40px;
  border: 4px solid var(--math-light);
  border-top-color: var(--math);
  border-radius: 50%;
  animation: spin calc(.8s * var(--anim-speed)) linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}