/* ==========================================================================
   SACH & VERSTAND – Design Tokens
   Abgeleitet aus dem bereitgestellten Corporate Design (Logo).
   Diese Datei ist die EINZIGE Quelle für Farben, Typografie- und
   Abstands-Werte. Bei einem späteren, final abgestimmten CI bitte
   ausschließlich hier anpassen – alle anderen Dateien referenzieren
   nur diese Variablen.
   ========================================================================== */

:root {
  /* ---- Markenfarben (aus dem echten Logo/CI extrahiert: #00a2bc) ---- */
  --color-teal-50:  #e0fbff;
  --color-teal-100: #bdf6ff;
  --color-teal-200: #7aedff;
  --color-teal-300: #29e2ff;
  --color-teal-400: #00a2bc;   /* Primärfarbe lt. Logo/CI */
  --color-teal-500: #00899e;
  --color-teal-600: #006e80;
  --color-teal-700: #005461;
  --color-teal-800: #003e47;
  --color-teal-900: #00282e;

  --color-ink:      #0d0d0d;  /* Wortmarke-Schwarz lt. Logo */
  --color-ink-700:  #262626;
  --color-ink-500:  #4d4d4d;
  --color-ink-300:  #7a7a7a;
  --color-ink-100:  #e6e6e6;

  --color-white:    #ffffff;
  /* Bewusst kein reines Klinik-Weiß als Seitenhintergrund – ein sehr
     leichter, warmer Elfenbeinton wirkt hochwertiger und weniger steril,
     ohne von der Markenfarbe abzulenken. */
  --color-bg:       #fdfbf6;
  /* Kräftiger getönt als zuvor, damit Sektionswechsel sichtbarer/"lebendiger"
     wirken statt fast weiß auf weiß zu verschwimmen. */
  --color-bg-subtle:#e9f7f2;
  --color-bg-muted: #dcefe9;
  --color-border:   #d6cfc0;

  --color-success:  #1fa971;
  --color-warning:  #c98a1a;
  --color-danger:   #c93a3a;
  --color-info:     #1c7fb8;

  /* Semantische Aliase */
  --color-primary:      var(--color-teal-400);
  --color-primary-hover:var(--color-teal-500);
  --color-primary-ink:  var(--color-ink);      /* Text auf hellem Teal */
  --color-on-primary:   var(--color-ink);      /* Text auf Primärfarbe */
  --color-text:         var(--color-ink);
  --color-text-muted:   var(--color-ink-500);
  --color-text-soft:    var(--color-ink-300);

  /* ---- Typografie ----
     Eine einzige Schriftfamilie für Überschriften und Fließtext –
     einheitliches, seriöses Erscheinungsbild ohne Schriftmischung.
     Die Wortmarke (Logo) behält ihre eigene, davon unabhängige Serife. */
  --font-display: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;

  --fs-h1: clamp(2.3rem, 1.6rem + 2.6vw, 4rem);
  --fs-h2: clamp(1.6rem, 1.3rem + 1.4vw, 2.5rem);
  --fs-h3: clamp(1.25rem, 1.1rem + 0.7vw, 1.6rem);
  --fs-lead: clamp(1.05rem, 1rem + 0.3vw, 1.25rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-tiny: 0.75rem;

  --lh-tight: 1.15;
  --lh-normal: 1.55;

  --tracking-wide: 0.08em;
  --tracking-widest: 0.16em;

  /* ---- Abstände ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  --container-max: 1180px;
  --container-narrow: 760px;

  /* ---- Radius / Schatten ---- */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(13,13,13,0.08);
  --shadow-md: 0 10px 28px rgba(13,13,13,0.12);
  --shadow-lg: 0 20px 48px rgba(13,13,13,0.16);
  --shadow-focus: 0 0 0 3px rgba(0,162,188,0.45);

  /* ---- Übergänge ---- */
  --ease: cubic-bezier(.4,0,.2,1);
  --dur-fast: 150ms;
  --dur-normal: 240ms;

  /* ---- Layout ---- */
  --header-height: 76px;
  --header-container-max: 1400px;
  --z-header: 100;
  --z-overlay: 200;
  --z-modal: 300;
  --z-toast: 400;
}

/* Dark-Mode wird bewusst NICHT eingeführt, bis das finale CI vorliegt –
   Professional-Services-Anmutung soll hell/ruhig bleiben. */