/* Gemeinsame Tokens + Schriften. Sanftes Salbeigrün überall; Gold = eingeloggt,
   kräftiges Grün = richtig, Rot = falsch. */

@font-face {
  font-family: 'Pilcrow Rounded';
  src: url('/assets/fonts/PilcrowRounded-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('/assets/fonts/Archivo-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('/assets/fonts/Archivo-Medium.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('/assets/fonts/Archivo-Semibold.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/assets/fonts/JetBrainsMono-Medium.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}

:root {
  --bg: #e3f1e7;        /* Seitenhintergrund */
  --panel: #f3faf5;     /* Karten, Eingabefelder */
  --panel-2: #d3ebda;   /* Zeilen, Knöpfe */
  --line: #a3d1b2;      /* Kanten */
  --bone: #163a2a;      /* Schrift */
  --ink: #10291d;       /* Schrift auf farbigen Flächen */
  --muted: #4b7461;     /* Nebentext */
  --accent: #2b7a50;    /* Buchstaben, Punkte, Hauptknopf */
  --gold: #f5a524;      /* eingeloggt (Fläche) */
  --gold-ink: #9a5c00;  /* Gold als Schriftfarbe auf hellem Grund */
  --green: #1e9e57;     /* richtig */
  --red: #e5484d;       /* falsch */
  --violet: #2b7a50;    /* Fokus/Hauptknopf (Name historisch) */
  --display: 'Pilcrow Rounded', 'Segoe UI Rounded', 'Segoe UI', sans-serif;
  --text: 'Archivo', 'Segoe UI', Arial, sans-serif;
  --mono: 'JetBrains Mono', Consolas, monospace;
}

* { box-sizing: border-box; margin: 0; }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--violet); outline-offset: 2px; }

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