/* ==========================================================================
   neuziel.de – Design Tokens
   --------------------------------------------------------------------------
   Palette identisch zu den Salespages (Belegungsplan, neuziel recruit,
   BauKI Lausitz). Bewusst klein gehalten: drei Markenfarben, fünf Neutrale,
   drei Status-Farben. Neue Farben werden nicht erfunden – reicht die
   Palette für einen Fall nicht, wird zuerst hier entschieden, nicht im
   Komponenten-CSS.

   Die alte WordPress-Palette (29 --neuziel-* Werte inkl. Lachs- und
   Rosatönen) liegt zum Nachschlagen unter docs/original-tokens.css und
   wird bewusst NICHT übernommen.
   ========================================================================== */

:root {
  /* === Marke ============================================================ */
  --color-orange:  #ED6A53; /* Primärakzent, CTAs, Icons, Hervorhebungen */
  --color-red:     #C42D4E; /* Sekundärakzent, Gradient-Partner, Hover-States */
  --color-navy:    #1E293B; /* dunkle Kontrastflächen: Hero, Footer, Headlines */

  --gradient-brand: linear-gradient(135deg, var(--color-orange) 0%, var(--color-red) 100%);

  /* === Neutrale Flächen – viel Weißraum ist Pflicht ===================== */
  --color-bg:       #FFFFFF;
  --color-bg-soft:  #F7F8FA;
  --color-border:   #E6E9EF;
  --color-ink:      #1E293B;
  --color-ink-soft: #5B6472;
  --color-white:    #FFFFFF;

  /* === Status =========================================================== */
  --color-success:  #1F9D63;
  --color-warning:  #E8A33D;
  --color-danger:   #C42D4E; /* = --color-red, semantisch benannt */
  --color-muted:    #A7AFBB;

  /* === Fokus ============================================================ */
  /* Gleiches Muster wie in den Salespages: kräftige Outline im
     Primärakzent, keine eigene Fokusfarbe. Sichtbarer Fokus ist
     BFSG-Pflicht – und neuziel berät selbst dazu. */
  --focus-outline: 3px solid var(--color-orange);
  --focus-offset: 3px;

  /* === Form & Tiefe ===================================================== */
  --radius-sm: 8px;  /* Inputs, Chips */
  --radius-md: 12px;
  --radius-lg: 20px;
  --shadow-soft: 0 8px 30px rgba(30, 41, 59, .08);
  --shadow-lift: 0 16px 44px rgba(30, 41, 59, .12); /* Hover auf Karten */

  /* === Layout =========================================================== */
  --max-width: 1200px;
  --section-pad-y: clamp(3.5rem, 7vw, 6.5rem);
  --header-h: 72px;

  /* === Typografie ======================================================= */
  /* Systemstack wie in den Salespages: keine Webfonts, kein FOUT,
     null zusätzliche Requests. */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
}