/* ============================================================
   BASE.CSS — DigiOpo
   Muuttujat, reset, html/body, typografia
   ============================================================ */

:root {
  /* Päävärit — teema D: pehmeä pastelinen violetti/pinkki */
  --primary: #7c3aed;
  --primary-hover: #6d28d9;
  --navbar: #4c1d95;

  /* Taustat */
  --bg: #fdf4ff;
  --card: #ffffff;

  /* Reunat */
  --border: #e9d5ff;

  /* Teksti */
  --text: #1e1b4b;
  --text-light: #6b21a8;

  /* Kategoriataggien värit */
  --tag-vahvuudet: #d97706;
  --tag-opiskelu: #7c3aed;
  --tag-tet: #16a34a;
  --tag-urat: #db2777;
  --tag-interactive: #0891b2;

  /* Komponenttivärit */
  --color-teoria: #faf5ff;
  --color-teoria-border: #a855f7;
  --color-tehtava: #fdf2f8;
  --color-tehtava-border: #ec4899;
  --color-interactive: #f5f3ff;
  --color-interactive-border: #7c3aed;
  --color-toiminta: #fef9c3;
  --color-toiminta-border: #ca8a04;

  /* Luokkakorttien värit */
  --class-7: #7c3aed;
  --class-7-accent: #6d28d9;
  --class-8: #db2777;
  --class-8-accent: #be185d;
  --class-9: #0d9488;
  --class-9-accent: #0f766e;

  /* Sivupalkki */
  --sidebar-width: 320px;

  /* Breakpointit */
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 900px;
}

/* Reset */

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

html {
  scroll-behavior: smooth;
}

body {
  font-family:
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    sans-serif;
  margin: 0;
  padding: 0 16px;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
}

h1,
h2,
h3 {
  margin-top: 0;
}

a {
  text-decoration: none;
  color: inherit;
}

/* Saavutettavuus — fokus-indikaattori */

a:focus-visible,
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--tag-vahvuudet);
  outline-offset: 2px;
}

/* Liikeherkkyys — poistaa kaikki animaatiot tarvittaessa */

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