/* =============================================================
   TM24 Markentokens – EIN Satz für Shop (Kaufen), Ankauf (Verkaufen) und B2B
   Version 2.0.0 – 2026-10-13 (Claude, freigegebene Designrichtung)
   Quelle der Werte: Bildmarke (Blau/Rot) und dokumentierte TM24-Farben
   (#003B8F / #E30613, ankauf-brand-unity 05/2026). Indigo #2E2BCB und alle
   Violett-/Lavendeltöne sind abgelöst. Diese Datei wird VOR allen anderen
   Stylesheets geladen; spätere Dateien überschreiben nur Alias-Namen mit
   denselben Werten, nie mit anderen Farben.
   ============================================================= */
:root {
  /* Marke */
  --tm-blue: #003B8F;          /* Primär: Buttons, aktive Insel, Links, Fokus */
  --tm-blue-bright: #0039E8;   /* Logo-Blau: Verläufe, Highlights */
  --tm-blue-dark: #002A6B;     /* Hover, Verlaufsende */
  --tm-blue-soft: #EAF0FF;     /* Auswahlflächen, Chips, Pills hell */
  --tm-blue-ring: rgba(0, 59, 143, .22);
  --tm-red: #E30613;           /* sparsam: Badges, Preis-Highlight, Zählmarken – nie Fehler */
  --tm-red-soft: #FDE7E9;
  --tm-navy: #06122E;          /* Footer, Vorteilsleiste, dunkle Flächen */
  --tm-navy-2: #0F1F4A;        /* Flächen auf Navy (Module, Karten) */
  --tm-on-navy: #FFFFFF;
  --tm-on-navy-muted: #C7CDEA;
  --tm-on-navy-accent: #9FB4FF;

  /* Verläufe für die blauen Einstiegsflächen (Kaufen, B2B) */
  --tm-grad: linear-gradient(135deg, var(--tm-blue-bright) 0%, var(--tm-blue) 55%, var(--tm-blue-dark) 100%);
  --tm-grad-top: var(--tm-navy);

  /* Neutral */
  --tm-bg: #F4F5F9;
  --tm-surface: #FFFFFF;
  --tm-surface-2: #F8F9FC;
  --tm-border: #E3E6EE;
  --tm-border-strong: #C9CFDD;
  --tm-ink: #111827;
  --tm-ink-2: #3B4458;
  --tm-muted: #6B7385;

  /* Status (getrennt vom Marken-Rot) */
  --tm-success: #15803D; --tm-success-soft: #E9F7EE;
  --tm-warn: #B45309;    --tm-warn-soft: #FFF4E5;
  --tm-danger: #B91C1C;  --tm-danger-soft: #FDECEC;

  /* Schrift */
  --tm-font: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --tm-h-weight: 800;

  /* Form und Raster */
  --tm-r-sm: 10px; --tm-r-md: 14px; --tm-r-lg: 16px; --tm-r-pill: 999px;
  --tm-shadow-1: 0 1px 2px rgba(17,24,39,.05);
  --tm-shadow-2: 0 10px 28px -14px rgba(17,24,39,.22);
  --tm-max: 1120px; --tm-gutter: 16px;
  --tm-header-h: 72px; --tm-logo-h: 34px;

  /* ── Alias-Namen älterer Dateien (gleiche Werte, nur andere Namen) ── */
  --tm-accent: var(--tm-blue);
  --tm-accent-ink: var(--tm-blue-dark);
  --tm-accent-soft: var(--tm-blue-soft);
  --tm-accent-ring: var(--tm-blue-ring);
  --tm-blue-light: rgba(0, 59, 143, .08);
  --tm-blue-mid: rgba(0, 59, 143, .18);
  --tm-blue-hover: var(--tm-blue-dark);
  --tm-blue-darker: var(--tm-navy);
  --tm-blue-glow: 0 6px 20px rgba(0, 59, 143, .24);
  --tm-blue-glow-lg: 0 10px 36px rgba(0, 59, 143, .32);
  --tm-dark: var(--tm-navy);
  --tm-gray: var(--tm-bg);
  --tm-text: var(--tm-ink);
  --tm-txt: var(--tm-ink);
  --tm-txt-s: var(--tm-ink-2);
  --tm-card: var(--tm-surface);
  --tm-green: var(--tm-success);
  --tm-orange: var(--tm-warn);
  --tm-focus-shadow: var(--tm-blue-ring);
  --tm24-blue: var(--tm-blue);
  --tm24-blue-dark: var(--tm-blue-dark);
  --tm24-blue-deep: var(--tm-navy);
  --tm24-red: var(--tm-red);
  --tm24-navy: var(--tm-navy);
  --tm24-hero-blue: var(--tm-blue);
  --tm24-hero-red: var(--tm-red);
}