/* ============================================================
   Design Tokens — Mathe-Dashboard
   Grundidee: Kariertes Papier + Füllerblau + Schulaufkleber-Gold.
   Kein generisches Dashboard-Look — die Optik kommt aus dem echten
   Schulheft-Kontext deutscher Gymnasiast:innen.
   ============================================================ */

:root {
  /* Farben */
  --paper: #FBFAF6;
  --paper-line: #D8DCC8;      /* die karierten Linien, sehr zurückhaltend */
  --ink: #1A1A1A;
  --ink-soft: #4A4A46;
  --pen-blue: #2B4C7E;
  --pen-blue-light: #E8EEF7;
  --gold: #D4A017;
  --gold-light: #FBF3DC;
  --sage: #7A9B57;             /* gemeistert */
  --sage-light: #EEF3E6;
  --brick: #C4453D;            /* fällig / gesperrt-Warnung */
  --brick-light: #FBEAE8;
  --locked-gray: #B8B8AD;

  /* Typografie */
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 1.75rem;
  --text-2xl: 2.5rem;

  /* Abstand */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 40px;
  --space-6: 64px;

  /* Sonstiges */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --shadow-card: 0 1px 2px rgba(26,26,26,0.06), 0 4px 12px rgba(26,26,26,0.04);
  --shadow-raised: 0 2px 4px rgba(26,26,26,0.08), 0 8px 24px rgba(26,26,26,0.08);
  --transition-fast: 120ms ease;
  --transition-base: 200ms ease;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #1E1E1A;
    --paper-line: #33342C;
    --ink: #F0EFE8;
    --ink-soft: #B8B7AC;
    --pen-blue-light: #263349;
    --gold-light: #3A331A;
    --sage-light: #26301F;
    --brick-light: #3A2220;
  }
}

* { box-sizing: border-box; }

html {
  /* Kariertes-Papier-Hintergrund als CSS-Gradient — kein Bild, lädt sofort */
  background-color: var(--paper);
  background-image:
    linear-gradient(var(--paper-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--paper-line) 1px, transparent 1px);
  background-size: 24px 24px;
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  font-size: var(--text-base);
  line-height: 1.5;
  min-height: 100vh;
}

h1, h2, h3, .font-display {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
}

.font-mono, .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

a { color: var(--pen-blue); }

button {
  font-family: inherit;
  cursor: pointer;
}

/* Sichtbarer Fokus-Ring für Tastaturnavigation — Barrierefreiheit */
:focus-visible {
  outline: 2px solid var(--pen-blue);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

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

.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;
}