/* ============================================
   ECX 00 - Design Tokens
   Unveraenderte Uebernahme des :root-Blocks aus dem
   Entwurf der Grafikerin (assets/styles.css).
   Variablennamen bleiben wie sie sind - CSS-Variablen
   sind ein eigener Namensraum, da kollidiert nichts.
   Diese Datei wird site-weit geladen: sie enthaelt nur
   Custom Properties und veraendert nichts an der
   bestehenden Darstellung.
   ============================================ */

:root {
  /* Brand */
  --ec-red: #ea355d;
  --ec-red-600: #d12a52;
  --ec-red-700: #b81d44;
  --ec-red-50:  #fde8ee;
  --ec-red-100: #fbd0dc;

  --ec-blue: #1d4267;
  --ec-blue-700: #163553;
  --ec-blue-900: #0e2237;
  --ec-blue-50:  #eaf0f6;
  --ec-blue-100: #d3dfeb;

  /* Neutrals */
  --ink: #0e2237;
  --ink-2: #3b4d63;
  --ink-3: #6b7a8d;
  --ink-4: #94a0b1;
  --line: #e4eaf1;
  --line-2: #eef2f7;
  --bg: #f6f8fb;
  --surface: #ffffff;

  /* Accent on dark */
  --dark-line: rgba(255,255,255,.14);
  --dark-line-2: rgba(255,255,255,.08);

  /* Gradient — derived from linien.png */
  --grad-brand: linear-gradient(135deg, #ea355d 0%, #b3257f 50%, #4f3a98 100%);

  /* Type */
  --font: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --t-display: clamp(40px, 4.4vw, 64px);
  --t-h1: clamp(30px, 2.8vw, 44px);
  --t-h2: clamp(24px, 2vw, 32px);
  --t-h3: 20px;
  --t-h4: 17px;
  --t-body: 15px;
  --t-sm: 14px;
  --t-xs: 12px;
  --t-eyebrow: 12px;

  /* Radius */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-2xl: 32px;
  --r-pill: 999px;

  /* Spacing (4 px base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-8: 56px;
  --space-10: 80px;

  /* Shadow */
  --shadow-1: 0 1px 2px rgba(14,34,55,.05), 0 1px 1px rgba(14,34,55,.04);
  --shadow-2: 0 8px 22px rgba(14,34,55,.08), 0 2px 6px rgba(14,34,55,.04);
  --shadow-3: 0 20px 50px rgba(14,34,55,.14), 0 6px 14px rgba(14,34,55,.06);

  /* Motion */
  --ease: cubic-bezier(.22,.61,.36,1);
  --dur: 280ms;
}