/* =========================================================
   TOABAI DESIGN TOKENS · Sprint 1
   Verbindliche Grundlage für neue und migrierte Komponenten.
   Bestehende Variablen bleiben als kompatible Aliase erhalten.
========================================================= */
:root {
  /* Farbe */
  --tm-color-primary: #2563eb;
  --tm-color-primary-hover: #1d4ed8;
  --tm-color-primary-strong: #1e40af;
  --tm-color-navy: #0f172a;
  --tm-color-text: #0f172a;
  --tm-color-muted: #475569;
  --tm-color-subtle: #64748b;
  --tm-color-white: #ffffff;
  --tm-color-surface: #ffffff;
  --tm-color-surface-soft: #f8fafc;
  --tm-color-surface-dark: #080b12;
  --tm-color-surface-dark-soft: #111827;
  --tm-color-border: #e2e8f0;
  --tm-color-border-strong: #cbd5e1;
  --tm-color-success: #15803d;
  --tm-color-success-soft: #f0fdf4;
  --tm-color-warning: #b45309;
  --tm-color-warning-soft: #fffbeb;
  --tm-color-danger: #b91c1c;
  --tm-color-danger-soft: #fef2f2;
  --tm-color-info-soft: #eff6ff;

  /* Typografie */
  --tm-font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --tm-font-size-xs: 0.8125rem;
  --tm-font-size-sm: 0.9375rem;
  --tm-font-size-base: 1rem;
  --tm-font-size-lg: 1.125rem;
  --tm-font-size-xl: clamp(1.25rem, 1.6vw, 1.5rem);
  --tm-font-size-h3: clamp(1.35rem, 2vw, 1.75rem);
  --tm-font-size-h2: clamp(2rem, 4vw, 3.25rem);
  --tm-font-size-h1: clamp(2.5rem, 6vw, 4.75rem);
  --tm-line-tight: 1.08;
  --tm-line-heading: 1.16;
  --tm-line-body: 1.7;
  --tm-weight-normal: 400;
  --tm-weight-medium: 600;
  --tm-weight-semibold: 700;
  --tm-weight-bold: 800;

  /* Abstand · 4px-Raster */
  --tm-space-1: 0.25rem;
  --tm-space-2: 0.5rem;
  --tm-space-3: 0.75rem;
  --tm-space-4: 1rem;
  --tm-space-5: 1.25rem;
  --tm-space-6: 1.5rem;
  --tm-space-8: 2rem;
  --tm-space-10: 2.5rem;
  --tm-space-12: 3rem;
  --tm-space-16: 4rem;
  --tm-space-20: 5rem;
  --tm-space-24: 6rem;
  --tm-space-section: clamp(4.5rem, 9vw, 8rem);

  /* Form */
  --tm-radius-xs: 10px;
  --tm-radius-sm: 14px;
  --tm-radius-md: 20px;
  --tm-radius-lg: 28px;
  --tm-radius-xl: 34px;
  --tm-radius-pill: 999px;
  --tm-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --tm-shadow-sm: 0 10px 30px rgba(15, 23, 42, 0.06);
  --tm-shadow-md: 0 20px 55px rgba(15, 23, 42, 0.09);
  --tm-shadow-lg: 0 24px 70px rgba(15, 23, 42, 0.12);
  --tm-focus-ring: 0 0 0 4px rgba(37, 99, 235, 0.18);
  --tm-transition-fast: 160ms ease;
  --tm-transition: 220ms ease;

  /* Karten und Oberflächen */
  --tm-card-radius: 24px;
  --tm-card-padding: clamp(1.5rem, 2.6vw, 2rem);
  --tm-card-border: 1px solid rgba(226, 232, 240, 0.95);
  --tm-card-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 10px 30px rgba(15, 23, 42, 0.05);
  --tm-card-shadow-hover: 0 1px 2px rgba(15, 23, 42, 0.04), 0 20px 48px rgba(15, 23, 42, 0.09);

  /* Layout-Kompatibilität für bestehende Komponenten */
  --tm-wide: var(--tm-layout-content, 1120px);
  --tm-container: var(--tm-layout-content, 1120px);

  /* Kompatible Aliase */
  --tm-bg: var(--tm-color-surface);
  --tm-bg-soft: var(--tm-color-surface-soft);
  --tm-bg-dark: var(--tm-color-surface-dark);
  --tm-dark: var(--tm-color-surface-dark);
  --tm-dark-soft: var(--tm-color-surface-dark-soft);
  --tm-text: var(--tm-color-text);
  --tm-muted: var(--tm-color-muted);
  --tm-border: var(--tm-color-border);
  --tm-primary: var(--tm-color-primary);
  --tm-primary-dark: var(--tm-color-primary-hover);
  --tm-blue: var(--tm-color-primary);
  --tm-navy: var(--tm-color-navy);
  --tm-soft: var(--tm-color-surface-soft);
  --tm-success: var(--tm-color-success);
  --tm-warning: var(--tm-color-warning);
  --tm-danger: var(--tm-color-danger);
  --tm-radius: var(--tm-radius-md);
  --tm-shadow: var(--tm-shadow-sm);
  --tm-logo-main: var(--tm-color-navy);
  --tm-logo-sub: var(--tm-color-primary);
  --tm-logo-accent: var(--tm-color-primary);
}