/* ZP10-Mathe-Lernpaket – Design Tokens
   Designrichtung: „Graph & Raster" – die Mathematik selbst als Designsprache.
   Eine Quelle für Farben, Spacing, Typografie. Genutzt in App, Blättern, Spiel, Videos. */

/* Schriften zentral laden – schlägt auf alle Seiten durch, die tokens.css einbinden.
   Atkinson Hyperlegible: legibilitäts-optimierter Fließtext (ruhiges, sicheres Lesen).
   Space Grotesk: technisch-geometrische, freundliche Display-Schrift für Überschriften.
   JetBrains Mono: klare Ziffern/Zeichen für Formeln & Koordinaten (0 ≠ O, 1 ≠ l). */
@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* Farben – warm-kühl, ruhig, technisch-klar, kontraststark (WCAG AA) */
  --color-bg: #eef1ee;            /* heller Raster-Grund */
  --color-bg-alt: #e3e8e4;        /* etwas tiefer für Flächen */
  --color-surface: #fbfdfb;       /* Karten-Hintergrund, leicht kühl-warm */
  --color-surface-2: #eef3f2;     /* eingebettete Flächen auf Karten */
  --color-ink: #16222c;           /* Haupt-Textfarbe / Tinte */
  --color-ink-soft: #44545f;      /* Sekundärtext */
  --color-ink-mute: #7a8893;      /* Hinweistext */
  --color-line: #d7e0dc;          /* Trennlinien / Kartenränder */
  --color-line-soft: #e7ecea;     /* sehr dezente Trennung */

  /* Raster (Millimeterpapier) – als Hintergrund in base.css genutzt */
  --color-grid: rgba(22, 50, 60, 0.07);
  --color-grid-bold: rgba(22, 50, 60, 0.13);

  --color-accent: #0e6e78;        /* Petrol – Hauptaktion, kräftiger */
  --color-accent-strong: #0a5159; /* Hover/Aktiv */
  --color-accent-soft: #d3ebed;   /* sanfter Akzent-Hintergrund */
  --color-accent-tint: #e7f4f4;   /* noch zarter */
  --color-plot: #e0603a;          /* „gesetzter Punkt" / Highlight – warmes Korall */
  --color-plot-soft: #f7ddd3;

  --color-success: #1f7a47;       /* Erfolgsgrün */
  --color-success-soft: #d6efdf;
  --color-warn: #a9651a;          /* Hinweis-Orange */
  --color-warn-soft: #f7ead4;
  --color-error: #b03f2c;         /* Fehler-Rotbraun (warm, nicht alarmierend) */
  --color-error-soft: #f6ddd6;

  --color-mascot: #d99a32;        /* Pi-Eulen-Goldton */
  --color-mascot-soft: #fbe9c4;
  --color-mascot-strong: #ab7820;

  /* Themen-Farbidentitäten – gleiche Ruhe, unterschiedliche Hue (oklch), etwas kräftiger */
  --theme-sicher:  oklch(0.55 0.12 152);   /* Grün – sichere Punkte */
  --theme-sicher-soft:  oklch(0.95 0.045 152);
  --theme-linear:  oklch(0.52 0.11 218);   /* Petrol – lineare Funktionen */
  --theme-linear-soft:  oklch(0.95 0.04 218);
  --theme-quad:    oklch(0.52 0.13 292);   /* Indigo – quadratische Funktionen */
  --theme-quad-soft:    oklch(0.95 0.04 292);
  --theme-trig:    oklch(0.57 0.15 42);    /* Terrakotta – Trigonometrie */
  --theme-trig-soft:    oklch(0.95 0.05 42);
  --theme-geo:     oklch(0.53 0.12 262);   /* Blauviolett – Geometrie */
  --theme-geo-soft:     oklch(0.95 0.04 262);
  --theme-stoch:   oklch(0.55 0.13 330);   /* Magenta-Rosé – Stochastik */
  --theme-stoch-soft:   oklch(0.95 0.05 330);
  --theme-pruef:   oklch(0.60 0.13 82);    /* Gold – Prüfungssimulation */
  --theme-pruef-soft:   oklch(0.95 0.06 85);

  /* Typografie */
  --font-display: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-sans: "Atkinson Hyperlegible", -apple-system, BlinkMacSystemFont,
               "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --fs-xs: 0.8125rem;   /* 13 */
  --fs-sm: 0.9375rem;   /* 15 */
  --fs-md: 1.0625rem;   /* 17 – Lesbasis */
  --fs-lg: 1.25rem;     /* 20 */
  --fs-xl: 1.5rem;      /* 24 */
  --fs-2xl: 2rem;       /* 32 */
  --fs-3xl: 2.625rem;   /* 42 */

  --lh-tight: 1.12;
  --lh-normal: 1.55;
  --lh-loose: 1.7;

  /* Spacing (4-Schritt-Raster) */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;

  /* Form – schärfer, technischer */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  /* Schatten – weich + die A-Signatur „Offset" (in base.css auf Hover) */
  --shadow-sm: 0 1px 2px rgba(20, 40, 50, 0.06), 0 2px 8px rgba(20, 40, 50, 0.05);
  --shadow-md: 0 4px 14px rgba(20, 40, 50, 0.10), 0 18px 40px rgba(20, 40, 50, 0.10);
  --shadow-lg: 0 8px 24px rgba(20, 40, 50, 0.12), 0 28px 60px rgba(20, 40, 50, 0.16);
  --shadow-focus: 0 0 0 3px rgba(14, 110, 120, 0.32);

  /* Layout */
  --content-max: 820px;
  --tap-target: 46px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #11171b;
    --color-bg-alt: #19222a;
    --color-surface: #1c272f;
    --color-surface-2: #243038;
    --color-ink: #eef3f1;
    --color-ink-soft: #c0ccd2;
    --color-ink-mute: #8b99a2;
    --color-line: #36444d;
    --color-line-soft: #28343c;

    --color-grid: rgba(150, 190, 200, 0.05);
    --color-grid-bold: rgba(150, 190, 200, 0.09);

    --color-accent: #4fb5c1;
    --color-accent-strong: #7fd3dd;
    --color-accent-soft: #143b41;
    --color-accent-tint: #122e33;
    --color-plot: #f08a64;
    --color-plot-soft: #3a221a;

    --color-success: #6fc090;
    --color-success-soft: #1b3327;
    --color-warn: #e0b070;
    --color-warn-soft: #382a16;
    --color-error: #e6886f;
    --color-error-soft: #3a201b;

    --color-mascot: #ecc063;
    --color-mascot-soft: #382c16;
    --color-mascot-strong: #ecc063;

    --theme-sicher:  oklch(0.78 0.12 152);
    --theme-sicher-soft:  oklch(0.30 0.06 152);
    --theme-linear:  oklch(0.80 0.10 218);
    --theme-linear-soft:  oklch(0.30 0.06 218);
    --theme-quad:    oklch(0.78 0.11 292);
    --theme-quad-soft:    oklch(0.30 0.06 292);
    --theme-trig:    oklch(0.78 0.13 42);
    --theme-trig-soft:    oklch(0.32 0.07 42);
    --theme-geo:     oklch(0.78 0.11 262);
    --theme-geo-soft:     oklch(0.30 0.06 262);
    --theme-stoch:   oklch(0.80 0.12 330);
    --theme-stoch-soft:   oklch(0.32 0.07 330);
    --theme-pruef:   oklch(0.82 0.12 85);
    --theme-pruef-soft:   oklch(0.32 0.07 85);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 6px rgba(0, 0, 0, 0.25);
    --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.35), 0 10px 28px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.4), 0 20px 48px rgba(0, 0, 0, 0.55);
    --shadow-focus: 0 0 0 3px rgba(79, 181, 193, 0.45);
  }
}