/* =====================================================================
   KEJOB CI – Design Tokens
   Quelle: KEJOB Design System (abgeleitet von kejob.at + Original-Logos).
   TODO(CI): Sobald offizielle CI-Unterlagen vorliegen, Werte hier
   zentral ersetzen – alle Komponenten lesen ausschließlich diese Tokens.
   ===================================================================== */
:root {
  /* Marke */
  --red: #c02743;            /* Handlungsfarbe: Buttons, Eyebrows, Links */
  --red-deep: #843949;       /* Hover, Banner-Verlauf links */
  --red-soft: #bb445b;       /* Banner-Verlauf rechts */
  --red-tint: #fce3eb;
  --red-highlight: #f2d4d9;  /* Marker unter Schlüsselwörtern */
  --logo-wordmark: #d3014b;
  --logo-pink: #fb5477;
  --logo-green: #05ac7a;
  --logo-orange: #f77126;
  --logo-blue: #2ca9e6;

  /* Text */
  --ink: #191919;
  --text: #404347;
  --muted: #5b5b5b;

  /* Flächen */
  --surface: #ffffff;
  --surface-grey: #ecf0f4;
  --surface-sky: #e5f5ff;
  --hero-sky: #edf8fe;
  --sky-start: #e2f3fe;
  --sky-end: #95d4fe;
  --navy: #33445f;
  --navy-deep: #26344b;      /* Ergänzung: Footer-Tiefe (aus Navy abgedunkelt) */
  --border-soft: #dfe5ec;

  /* Typografie */
  --font-sans: "Outfit", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  /* Abstände */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-6: 48px;
  --space-8: 64px;
  --space-12: 96px;

  /* Radien */
  --radius-sm: 14px;
  --radius-md: 20px;
  --radius-pill: 9999px;

  /* Layout */
  --container: 1240px;
  --button-height: 48px;
  --focus: var(--navy);
}