/* =====================================================================
   Design-Tokens der Lernplattform – Variante „Lehrbuch“
   Alle Farben, Schriften, Abstände, Radien und Breiten stehen nur hier.
   Komponenten (style.css) verwenden ausschließlich diese Variablen.
   ===================================================================== */

:root {
  /* --- Farben: hell (Papier und Tinte) --- */
  --paper: #FAF7F0;          /* Seitenhintergrund, warmer Papierton */
  --paper-2: #F1ECE1;        /* abgesetzte Flächen: Merkkästen, Codeblöcke */
  --paper-3: #E8E1D2;        /* Hover auf abgesetzten Flächen */
  --ink: #1C1D21;            /* Fließtext und Überschriften, 15,7 : 1 */
  --muted: #585B63;          /* Nebentext, 6,3 : 1 */
  --rule: #DAD4C6;           /* feine Linien und Trenner */
  --rule-strong: #1C1D21;    /* kräftige Linien (Kapitelanfang) */

  /* Akzentfarben je Hauptkategorie (Text auf Papier jeweils über 5 : 1) */
  --informatik: #26479A;     /* Kobaltblau */
  --informatik-soft: #E3E8F4;
  --handel: #2E6A43;         /* Waldgrün */
  --handel-soft: #E1EDE3;
  --neutral-accent: #5A4A2E; /* für Inhalte ohne Hauptkategorie */
  --neutral-soft: #EFE7D6;

  /* Zustände */
  --ok: #2E6A43;
  --ok-soft: #E1EDE3;
  --bad: #A12A1E;
  --bad-soft: #F6E1DD;
  --warn: #7A560C;
  --warn-soft: #F3E8CC;
  --focus: #26479A;
  --on-accent: #FFFFFF;      /* Text auf gefüllten Akzentflächen */

  /* Aktuelle Akzentfarbe: wird pro Hauptkategorie über data-bereich gesetzt */
  --accent: var(--informatik);
  --accent-soft: var(--informatik-soft);

  /* --- Schriften (selbst gehostet, keine Anfragen an Google) --- */
  --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-sans: "Atkinson Hyperlegible", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "Source Code Pro", Consolas, "Liberation Mono", monospace;

  /* Schriftgrößen (Typo-Skala, Basis 17 px) */
  --text-xs: 0.78rem;
  --text-sm: 0.88rem;
  --text-base: 1rem;
  --text-md: 1.12rem;
  --text-lg: 1.3rem;
  --text-xl: 1.7rem;
  --text-2xl: clamp(1.9rem, 4vw, 2.5rem);
  --text-3xl: clamp(2.2rem, 5vw, 3.4rem);
  --leading-tight: 1.12;
  --leading-body: 1.65;
  --tracking-label: 0.08em;

  /* --- Abstände (4er-Raster) --- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 36px;
  --space-7: 56px;
  --space-8: 80px;

  /* --- Radien: bewusst klein, das Design lebt von Linien, nicht von Rundungen --- */
  --radius-0: 0;
  --radius-1: 2px;
  --radius-2: 4px;

  /* --- Linien --- */
  --line-thin: 1px;
  --line-bold: 2px;
  --line-mark: 3px;          /* Randstrich an Hinweis- und Merkkästen */

  /* --- Bedienbarkeit --- */
  --touch: 44px;             /* Mindesthöhe klickbarer Knöpfe */
  --touch-small: 36px;
  --check-size: 18px;        /* Auswahlkästchen und Optionsfelder */
  --bar-height: 4px;         /* Fortschrittslinie */
  --numeral-size: 3.2rem;    /* römische Teilnummern (I, II) */

  /* --- Flächen, die immer gleich aussehen müssen --- */
  --terminal-bg: #300A24;    /* Ubuntu-Terminal im Labor */
  --embed-bg: #FFFFFF;       /* Hintergrund eingebetteter Lerneinheiten (haben eigenes Design) */
  --overlay: rgba(28, 29, 33, 0.45);

  /* --- Breiten und Layout --- */
  --page-max: 1040px;        /* Gesamtbreite */
  --margin-col: 168px;       /* Marginalspalte */
  --measure: 70ch;           /* Zeilenlänge für Lesetext */
  --gutter: var(--space-4);  /* Seitenrand auf dem Handy */

  /* --- Breakpoints (nur zur Dokumentation; CSS-Variablen gehen nicht in @media):
         schmal  ≤ 760px  → Marginalspalte wird zur Zeile, Navigation bricht um
         breit   ≥ 1040px → volle Seitenbreite                                 --- */

  /* --- Bewegung --- */
  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
  --dur-fast: 120ms;
  --dur: 220ms;

  color-scheme: light;
}

/* Kategorie-Akzente, geerbt von allen Unterseiten */
[data-bereich="informatik"] { --accent: var(--informatik); --accent-soft: var(--informatik-soft); }
[data-bereich="einzelhandel"] { --accent: var(--handel); --accent-soft: var(--handel-soft); }
[data-bereich="weitere"] { --accent: var(--neutral-accent); --accent-soft: var(--neutral-soft); }

/* --- Dunkler Modus: folgt dem Gerät, außer die Person hat hell/dunkel selbst gewählt --- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #17171A; --paper-2: #1F1F23; --paper-3: #29292E;
    --ink: #E7E3DA; --muted: #A9A69F; --rule: #34343A; --rule-strong: #E7E3DA;
    --informatik: #9DB4F0; --informatik-soft: #212A40;
    --handel: #8FCB9F; --handel-soft: #1C2E22;
    --neutral-accent: #D6C29A; --neutral-soft: #2C271D;
    --ok: #8FCB9F; --ok-soft: #1C2E22; --bad: #F0A195; --bad-soft: #3A1F1B; --warn: #E3C47A; --warn-soft: #332A14;
    --focus: #9DB4F0; --on-accent: #17171A;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #17171A; --paper-2: #1F1F23; --paper-3: #29292E;
  --ink: #E7E3DA; --muted: #A9A69F; --rule: #34343A; --rule-strong: #E7E3DA;
  --informatik: #9DB4F0; --informatik-soft: #212A40;
  --handel: #8FCB9F; --handel-soft: #1C2E22;
  --neutral-accent: #D6C29A; --neutral-soft: #2C271D;
  --ok: #8FCB9F; --ok-soft: #1C2E22; --bad: #F0A195; --bad-soft: #3A1F1B; --warn: #E3C47A; --warn-soft: #332A14;
  --focus: #9DB4F0; --on-accent: #17171A;
  color-scheme: dark;
}