/* ═══════════════════════════════════════════════════════════════
   elearning-tokens.css
   Design-Tokens für den Webguardiola-E-Learning-Refactor.
   Alle Werte als CSS-Custom-Properties — keine Magic Numbers
   in den Komponenten-Files.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ── Farben · Editorial-System ────────────────────────────── */
  --es-blue:        #2d4ed8;   /* Primär-Akzent: Buttons, Italic-Headlines */
  --es-blue-deep:   #1d3aa8;   /* Hover/Pressed-State */
  --es-ink:         #0f172a;   /* Headlines, primärer Text */
  --es-ink-light:   #334155;   /* Body-Text */
  --es-ink-muted:   #64748b;   /* Captions, Mono-Labels */
  --es-paper:       #fafbfc;   /* Karten- und Topbar-BG */
  --es-cream:       #f4f1ea;   /* Page-BG (warmer Off-White) */
  --es-line:        #d6cfc0;   /* 1px Borders, Trennlinien */
  --es-warm:        #d97706;   /* Sekundär-Akzent / Warnung */
  --es-green:       #059669;   /* Erfolg / Bestätigung */

  /* ── Charakter-Farben · 4 Rollen ──────────────────────────── *
   * Mapping (entspricht type-Werten in lang-XX.js scenesData):  *
   *   hero     → Secura  (Informationssicherheits-Heldin)       *
   *   sidekick → Pepbee  (Tech-Experte, Flugroboter)            *
   *   victim   → Stefan  (Alltags-User, tappt in Fallen)        *
   *   villain  → Lowkey  (Cyber-Schurke)                        */
  --c-hero:         #2563eb;   --c-hero-bubble:     #dbeafe;
  --c-sidekick:     #10b981;   --c-sidekick-bubble: #d1fae5;
  --c-victim:       #7c3aed;   --c-victim-bubble:   #f3e8ff;
  --c-villain:      #d97706;   --c-villain-bubble:  #fef3c7;
  --c-narrator-bg-a: #fff7ed;
  --c-narrator-bg-b: #ffedd5;

  /* Avatar-PNG-URLs (Bunny CDN, sprachunabhängig) */
  --avatar-secura: url('https://webguardiola-media-2.b-cdn.net/images/avatar_secura.png');
  --avatar-pepbee: url('https://webguardiola-media-2.b-cdn.net/images/avatar_pepbee.png');
  --avatar-stefan: url('https://webguardiola-media-2.b-cdn.net/images/avatar_stefan.png');
  --avatar-lowkey: url('https://webguardiola-media-2.b-cdn.net/images/avatar_lowkey.png');

  /* ── Typografie ───────────────────────────────────────────── */
  --es-serif: 'EB Garamond', Georgia, 'Times New Roman', serif;
  --es-sans:  'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --es-mono:  'JetBrains Mono', ui-monospace, 'Cascadia Code', 'Consolas', monospace;

  /* ── Type-Scale (responsive über clamp) ───────────────────── */
  --es-display-1: clamp(48px, 7vw, 92px);    /* Hero-Headlines */
  --es-display-2: clamp(34px, 5vw, 64px);    /* Screen-Titel */
  --es-h2:        clamp(24px, 3vw, 40px);    /* Karten-Headlines */
  --es-h3:        clamp(20px, 2.2vw, 24px);  /* Modul-Karten */
  --es-body-l:    17px;                       /* Lead-Body */
  --es-body:      14px;                       /* Standard-Body */
  --es-caption:   13px;                       /* Captions */
  --es-mono-s:    11px;                       /* Mono-Labels */

  /* ── Layout · Page-Padding ────────────────────────────────── */
  --es-page-pad-mobile:  24px;   /* < 768px  */
  --es-page-pad-tablet:  40px;   /* ≥ 768px  */
  --es-page-pad:         64px;   /* ≥ 1024px */

  /* ── Radien · Editorial = scharfe Ecken, außer Bubbles ───── */
  --es-radius:        0;
  --es-radius-bubble: 0;         /* Bubbles eckig (Editorial-konsistent) */
  --es-radius-avatar: 50%;       /* Charakter-Avatare voll-rund */

  /* ── Easing ──────────────────────────────────────────────── */
  --es-ease:      cubic-bezier(0.2, 0, 0, 1);
  --es-ease-out:  cubic-bezier(0.4, 0, 0.2, 1);
  --es-ease-soft: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Z-Index-Skala ───────────────────────────────────────── */
  --z-topbar:   50;
  --z-bottomnav: 60;
  --z-overlay:  100;
  --z-toast:    200;

  /* ── Schatten · sparsam einsetzen ────────────────────────── */
  --shadow-soft:   0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-bubble: 0 2px 6px rgba(15, 23, 42, 0.06);
}

/* ═══════════════════════════════════════════════════════════════
   Breakpoints (als Kommentar dokumentiert — CSS hat keine
   benannten Media-Queries als Custom-Property)

   Mobile:  < 768px    → alles gestackt, Padding 24px
   Tablet:  ≥ 768px    → 2-Spalten möglich, Padding 40px
   Desktop: ≥ 1024px   → volles Editorial-Layout, Padding 64px
   Wide:    ≥ 1440px   → max-content-width 1280px zentriert
   ═══════════════════════════════════════════════════════════════ */