/* ============================================================
   OMNi-BiOTiC Design System — Tokens
   Single source of truth (Farbe/Typo gemessen an Prod-CI + Elementor-Kit;
   Rhythmus abgeleitet aus dem neuen Design). Prefix: --ob-
   Wachsen durch ERGÄNZEN, nie durch Umbenennen/Löschen (Breaking).
   ============================================================ */
:root {
  /* --- Marke · Magenta (Primär) --- */
  --ob-magenta-100: #B6185C; /* kanonisch (Prod-Rendering) */
  --ob-magenta-80:  #BD2F6C;
  --ob-magenta-60:  #DA8BAD;
  --ob-magenta-40:  #E9B9CE;
  --ob-magenta-20:  #F0D0DE;
  --ob-magenta-bg:  #FFE4F0;
  --ob-magenta-deep:#760A3A;
  --ob-magenta-bright:#EC3F90; /* Gradient-Endpunkt, leicht aufgehellt (Basis Entwurf #D92778) */

  /* --- Orange / Gelb (Akzent) --- */
  --ob-orange-100: #FF7700;
  --ob-orange-60:  #FFBB8C;
  --ob-orange-20:  #FFE4D2;

  /* --- Grün --- */
  --ob-green-100: #00754A;
  --ob-green-60:  #6CAD93;
  --ob-green-20:  #CEE3DB;

  /* --- Teal ("Blau") --- */
  --ob-teal-100: #005150;
  --ob-teal-60:  #7FA8A7;
  --ob-teal-20:  #C4D6D6;

  /* --- Dunkel · Sektionen --- */
  --ob-navy:      #102A43;
  --ob-navy-deep: #071D2F;
  --ob-cyan:      #65E6E4;
  --ob-rose:      #FF91BE;

  /* --- Neutrale & Sonstige --- */
  --ob-white:      #FFFFFF;
  --ob-text:       #4C4C4C;
  --ob-muted:      #665D68; /* zurückgenommener Text (Filter-Chips inaktiv) */
  --ob-grey:       #525252;
  --ob-grey-light: #F2F2F2;
  --ob-bg-warm:    #FFF7EE;
  --ob-line:       #E5DCE2;
  --ob-lime:       #A6C83C; /* Kit-"secondary" — faktisch ungenutzt, keine Rolle */

  /* --- Tint-Leiter (Need-Card, aus dem Entwurf; feste Reihenfolge, zyklisch) --- */
  --ob-tint-1: #F8E5EE;
  --ob-tint-2: #F5DCE7;
  --ob-tint-3: #EFE4EE;
  --ob-tint-4: #FAE9F2;
  --ob-tint-5: #F7EDF1;
  --ob-tint-6: #EEE6EC;

  /* Dunkle Begleiter der Tint-Leiter (paarig: heller Grund + dunkler, gleicher-Hue Akzent
     fuer Links/Icons auf hellen Schemata). Bewusst authored (color-mix auf blassen Tints
     ergaebe Schlamm); AA-sicher als dunkler Text/Akzent auf dem jeweiligen Tint-Grund.
     Nur 1-4: als Schema entfallen Tint 5/6 (Kundenwunsch); die Basis-Tints 1-6 bleiben,
     die Product-Cards nutzen den vollen 6er-Zyklus weiter. 1/2/4 gespreizt (Rot->Magenta->Fuchsia),
     3 driftet nach Plum. */
  --ob-tint-1-ink: #C0143F;
  --ob-tint-2-ink: var(--ob-magenta-100);
  --ob-tint-3-ink: #7C3A73;
  --ob-tint-4-ink: #A3227A;

  /* --- Semantische Rollen --- */
  --ob-color-primary:     var(--ob-magenta-100);
  --ob-color-ink:         var(--ob-navy); /* dunkler Text/Border auf Buttons (Entwurf) */
  --ob-color-accent:      var(--ob-orange-100);
  /* Haupt-Magenta trägt die Textzone (Weiß ≥ 4,5:1 AA), Hell-Pink nur in die Ecke */
  --ob-gradient-primary:  linear-gradient(120deg, var(--ob-magenta-100) 0%, var(--ob-magenta-100) 45%, var(--ob-magenta-bright) 100%);
  --ob-color-text:        var(--ob-text);
  --ob-color-muted:       var(--ob-muted);
  --ob-color-heading:     var(--ob-navy); /* Section-Headlines sind navy (Entwurf), nicht magenta */
  --ob-color-surface:     var(--ob-white);
  --ob-color-bg:          var(--ob-bg-warm);
  --ob-color-line:        var(--ob-line);
  --ob-color-inverse:     var(--ob-white);
  --ob-color-dark:        var(--ob-navy);
  --ob-color-dark-deep:   var(--ob-navy-deep);
  --ob-color-dark-accent: var(--ob-cyan);

  /* --- Typografie — Eine Familie: Source Sans 3. Section-Headlines groß & leicht (Entwurf). */
  --ob-font: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --ob-weight-light:    300;
  --ob-weight-regular:  400;
  --ob-weight-heading:  480; /* leichte Section-Headlines (Entwurf) */
  --ob-weight-semibold: 600;
  --ob-weight-bold:     700;
  /* Heading-Skala fluid (mobil → desktop); Entwurf: h1 ~104, h2 ~76 */
  --ob-fs-display: clamp(3rem, 7vw, 6.5rem);      /* ~48 → 104 */
  --ob-fs-h1:      clamp(2.5rem, 6vw, 5.5rem);    /* ~40 → 88 */
  --ob-fs-h2:      clamp(2.125rem, 5vw, 4.75rem); /* ~34 → 76 */
  --ob-fs-h3:      1.75rem;   /* 28 */
  --ob-fs-h4:      1.5rem;    /* 24 */
  --ob-fs-lead:    1.25rem;   /* 20 */
  --ob-fs-body:    1.125rem;  /* 18 */
  --ob-fs-small:   1.0625rem; /* 17 (+13% Kleintext-Bump) */
  --ob-fs-eyebrow: 0.90625rem; /* 14.5 (+11.5%) */
  --ob-fs-badge:   0.84375rem; /* 13.5 (+12.5%) */
  --ob-lh-tight:    1.1;
  --ob-lh-display:  1.02;     /* große Headlines eng */
  --ob-lh-heading:  1.12;
  --ob-lh-body:     1.6;
  --ob-tracking-eyebrow:  0.16em; /* Entwurf ~0.18em */
  --ob-tracking-heading: -0.03em; /* enge große Headlines */

  /* --- Spacing (4px-Basis) --- */
  --ob-space-1: 4px;  --ob-space-2: 8px;  --ob-space-3: 12px; --ob-space-4: 16px;
  --ob-space-5: 24px; --ob-space-6: 32px; --ob-space-7: 48px; --ob-space-8: 64px;
  --ob-space-9: 96px; --ob-space-10: 132px;
  --ob-section-y: var(--ob-space-10); /* Desktop; per Media-Query auf ~80/64 reduzieren */

  /* --- Radius --- */
  --ob-radius-xs:   8px;
  --ob-radius-sm:   12px;
  --ob-radius-card: 24px;
  --ob-radius-pill: 999px;

  /* --- Shadow (magenta-getönt) --- */
  --ob-shadow-sm:     0 8px 20px rgba(74, 17, 45, .06);
  --ob-shadow-md:     0 16px 42px rgba(62, 18, 42, .10);
  --ob-shadow-lg:     0 24px 60px rgba(74, 17, 45, .14);
  --ob-shadow-button: 0 14px 30px rgba(182, 24, 92, .24);
}

/* Breakpoints leben in @media (Custom Properties greifen dort nicht als Bedingung):
   mobile <= 768px · tablet <= 1024px · wide >= 1200px */