/* ClassTests v2-Refresh — Pool & Terrazzo Theme
 * --------------------------------------------------------------
 * Wird VOR style.css geladen. Definiert v2-Tokens (sp/r/sh/t/...)
 * UND mappt die bestehenden --ct-* Variablen auf neue Werte, damit
 * Inline-Styles in Templates ohne Refactor weiterfunktionieren.
 *
 * Palette: Pool & Terrazzo (sommerlich blau-peach), übernommen aus
 * classcards/themes.css "data-theme=pool".
 *  - Hintergrund:  #eef5f9  (helles Pool-Blau)
 *  - Sidebar/Brand: #2563a8 (Terrazzo-Blau)
 *  - Akzent/CTA:    #ff9068 (Peach)
 *
 * Bewertungs-Domäne (rote Streichungen, falsche Antworten) nutzt
 * eigene Variable --ct-grade-danger #DC2626, damit das markante Rot
 * dort erhalten bleibt während die UI-Warnings das softere Pink/Korall
 * verwenden.
 */

:root {
  /* ===== v2-Tokens (Komponenten-Layer .btn .card .tbl .sidebar etc.) ===== */
  --bg:          #eef5f9;
  --bg-warm:     #eef5f9;
  --surface:     #ffffff;
  --surface-2:   #e4eef4;
  --border:      rgba(10,11,16,0.12);
  --border-2:    rgba(10,11,16,0.18);

  --ink:         #0a0b10;
  --ink-2:       #544a5f;
  --mute:        #877c8f;

  --amber:       #ff9068;
  --amber-2:     #ff7a4c;
  --amber-soft:  #ffe8dc;
  --purple:      #2563a8;
  --purple-2:    #2f72bd;

  --success:     #18a67a;
  --warning:     #e08a2e;
  --danger:      #ff5570;

  /* 4px-Grid */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px;

  /* Radien */
  --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-pill: 999px;

  /* Motion */
  --ease: cubic-bezier(.2,0,.2,1);
  --t-fast: 120ms; --t-mid: 180ms; --t-slow: 280ms;

  /* Schatten — neutral, ungetönt */
  --sh-sm: 0 1px 2px rgba(10,11,16,.04), 0 1px 1px rgba(10,11,16,.03);
  --sh-md: 0 4px 12px rgba(10,11,16,.06), 0 2px 4px rgba(10,11,16,.04);
  --sh-lg: 0 16px 40px rgba(10,11,16,.08), 0 4px 12px rgba(10,11,16,.05);

  /* Layout */
  --sb-w:         260px;
  --sb-w-compact: 68px;
  --topbar-h:     60px;

  /* ===== Mapping-Layer: --ct-* nutzen die neuen Werte =====
   * So funktionieren alle Inline-Styles in Templates (z.B.
   * style="color: var(--ct-text-muted);") ohne Änderung weiter.
   */
  --ct-primary:        #2563a8;          /* war #5D4C9A — Pool-Blau */
  --ct-primary-light:  #2f72bd;          /* war #7A6BB5 */
  --ct-primary-dark:   #1d4f8a;          /* war #4A3D7A */
  --ct-primary-bg:     #e4eef4;          /* war #EEEAF5 */
  --ct-accent:         #ff9068;          /* war #e0a820 — Peach */
  --ct-success:        #18a67a;          /* war #16A34A */
  --ct-warning:        #e08a2e;          /* war #ea580c */
  --ct-danger:         #ff5570;          /* war #DC2626 — UI-Warnungen weicher */

  /* Bewertungs-Domäne: kräftiges Rot für Streichungen / falsche Antworten */
  --ct-grade-danger:   #DC2626;
  --ct-grade-success:  #16A34A;

  --ct-gradient:       linear-gradient(135deg, #2563a8 0%, #2f72bd 100%);
  --ct-gradient-dark:  linear-gradient(135deg, #1d4f8a 0%, #2563a8 50%, #1d4f8a 100%);

  --ct-bg:             #eef5f9;          /* war #F9F9F9 */
  --ct-card-bg:        #ffffff;
  --ct-bg-secondary:   #e4eef4;
  --ct-text-primary:   #0a0b10;          /* war #1E293B */
  --ct-text-secondary: #544a5f;          /* war #64748B */
  --ct-text-muted:     #877c8f;          /* war #94A3B8 */
  --ct-text:           #0a0b10;
  --ct-border:         rgba(10,11,16,0.12);
  --ct-bg-hover:       #e4eef4;

  /* Spacing — bestehende fluid-Skala behalten, da Templates clamp() nutzen */
  --ct-space-xs:  clamp(0.25rem, 0.5vw, 0.5rem);
  --ct-space-sm:  clamp(0.5rem, 1vw, 0.75rem);
  --ct-space-md:  clamp(0.75rem, 1.5vw, 1rem);
  --ct-space-lg:  clamp(1rem, 2vw, 1.5rem);
  --ct-space-xl:  clamp(1.5rem, 3vw, 2rem);
  --ct-space-2xl: clamp(2rem, 4vw, 3rem);

  --ct-text-xs:  clamp(0.6875rem, 0.5vw + 0.5rem, 0.75rem);
  --ct-text-sm:  clamp(0.75rem, 0.5vw + 0.55rem, 0.875rem);
  --ct-text-base:clamp(0.875rem, 0.5vw + 0.65rem, 1rem);
  --ct-text-lg:  clamp(1rem, 0.5vw + 0.75rem, 1.125rem);
  --ct-text-xl:  clamp(1.125rem, 0.75vw + 0.8rem, 1.25rem);
  --ct-text-2xl: clamp(1.25rem, 1vw + 0.8rem, 1.5rem);
  --ct-text-3xl: clamp(1.5rem, 1.5vw + 0.8rem, 1.875rem);
  --ct-text-4xl: clamp(1.875rem, 2vw + 0.8rem, 2.25rem);

  --ct-shadow-sm: 0 1px 2px rgba(10,11,16,.04), 0 1px 1px rgba(10,11,16,.03);
  --ct-shadow-md: 0 4px 12px rgba(10,11,16,.06), 0 2px 4px rgba(10,11,16,.04);
  --ct-shadow-lg: 0 16px 40px rgba(10,11,16,.08), 0 4px 12px rgba(10,11,16,.05);
  --ct-shadow-xl: 0 24px 60px rgba(10,11,16,.10), 0 8px 16px rgba(10,11,16,.05);

  --ct-radius-sm: 6px;
  --ct-radius-md: 8px;
  --ct-radius-lg: 12px;
  --ct-radius-xl: 16px;

  --ct-nav-height: var(--topbar-h);
}

@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 0ms; --t-mid: 0ms; --t-slow: 0ms; }
}

/* Inter Font + Feature-Settings global */
html, body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-feature-settings: "cv02","cv11","ss01";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.num { font-variant-numeric: tabular-nums; }