/* ============================================================
   Alkaline Bathing — Design Tokens
   QUELLE: DESIGN-SYSTEM.md (2026-04-21 freigegeben)
   Kein Hardcoding von Farben/Spacing/Typo außerhalb dieser Datei.
   ============================================================ */

:root {

  /* ── Farbschema: reines Hell-Design ───────────────────────
     Verhindert, dass Chrome/Edge/Mobile-„Auto-Dark-Mode" die
     helle Seite eigenmächtig abdunkelt (zerlegt sonst die CI).
     Gilt global für alle Seiten (Single-Source in tokens.css).
  ─────────────────────────────────────────────────────────── */
  color-scheme: light;

  /* ── Markenfarben ─────────────────────────────────────────
     Aqua → Teal → Very-Dark-Teal (Brand) + Orange (Akzent).
     Kontraste in DESIGN-SYSTEM.md §2b dokumentiert.
  ─────────────────────────────────────────────────────────── */
  --primary-100:   #D5F0F7;      /* Badge-Fills, Hover-Tint */
  --primary-300:   #7FDBEE;      /* Heller Accent, dekorativ */
  --primary-500:   #12B3D8;      /* Basis-Primär — Icons, Brand-Accents. NICHT als Button-BG mit weißem Text */
  --primary-700:   #006A8E;      /* CTA-Button-BG, Dark-Branded-Sections — 6.08:1 auf Weiß */
  --primary-800:   #004E6A;      /* CTA Hover */
  --primary-900:   #0A2933;      /* Footer-BG, Very Dark Teal */

  --accent:        #F26419;      /* Eyebrows, Badges — mit schwarzem Text (5.48:1) */
  --accent-dark:   #C7510F;      /* Accent als Text-Color auf Weiß (5.10:1) */

  /* Plattformfarbe Telegram — bewusst scoped auf Telegram-Karte/Button
     (Analog TikTok-Schwarz). NICHT als globaler Akzent verwenden. */
  --telegram:      #26A5E4;      /* Telegram-Blau — Button-BG/Header (weißer Text 3.4:1 → nur Large/Bold) */
  --telegram-dark: #1E8FCC;      /* Telegram Hover/Gradient */

  /* ── Text-Neutrale ──────────────────────────────────────── */
  --near-black:    #1A1A18;      /* Max-Kontrast Headlines */
  --text-primary:  #4D4D4F;      /* Fließtext (Kundenwunsch) — 8.43:1 auf Weiß */
  --text-secondary:#6B6B6D;      /* Muted / Labels — 5.45:1 auf Weiß */
  --warm-grey:     #7A7A76;      /* NUR für Texte ≥24px auf hell */
  --light-grey:    #C8C8C4;      /* KEIN Text — nur Borders/Divider */

  /* ── Background-Neutrale ────────────────────────────────── */
  --bg-primary:    #FFFFFF;      /* Hauptfläche */
  --bg-secondary:  #F7FBFC;      /* Leicht getöntes Off-White (Kundenfarbe) */
  --bg-dark:       var(--primary-700);   /* Dark-Branded Sections (Offer, CTA) */
  --bg-footer:     var(--primary-900);   /* Footer */

  /* ── Borders ────────────────────────────────────────────── */
  --border:        rgba(0,0,0,0.08);
  --border-strong: rgba(0,0,0,0.16);
  --border-on-dark:rgba(255,255,255,0.14);

  /* ── Semantic Text-Aliases (aus Approved Pairs) ──────────── */
  --text-on-dark:       #FFFFFF;
  --text-on-dark-muted: rgba(255,255,255,0.80);  /* DARK-2: 4.9:1 auf --primary-700 */
  --text-heading:       var(--near-black);        /* Headlines auf hell */
  --text-body:          var(--text-primary);      /* Fließtext auf hell */

  /* ── Typografie ───────────────────────────────────────────
     Fonts: async über Google Fonts laden (siehe FONT-GUIDE.md).
  ─────────────────────────────────────────────────────────── */
  --font-heading: 'Sora', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Inter', 'Helvetica Neue', Arial, sans-serif;

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* Modulare Skala Major Third (×1.25) — responsiv via clamp() */
  --text-xs:   clamp(0.64rem, 0.7vw,  0.72rem);   /*  ~10–11.5px */
  --text-sm:   clamp(0.80rem, 0.9vw,  0.90rem);   /*  ~13–14.5px */
  --text-base: clamp(1.00rem, 1.1vw,  1.10rem);   /*  ~16–17.5px */
  --text-lg:   clamp(1.25rem, 1.4vw,  1.40rem);   /*  ~20–22px   */
  --text-xl:   clamp(1.56rem, 1.8vw,  1.75rem);   /*  ~25–28px   */
  --text-2xl:  clamp(1.95rem, 2.2vw,  2.20rem);   /*  ~31–35px   */
  --text-3xl:  clamp(2.44rem, 2.8vw,  2.75rem);   /*  ~39–44px   */
  --text-4xl:  clamp(3.05rem, 3.5vw,  3.50rem);   /*  ~49–56px   */
  --text-5xl:  clamp(3.81rem, 4.5vw,  4.50rem);   /*  ~61–72px   */

  --leading-tight:   1.15;
  --leading-snug:    1.3;
  --leading-normal:  1.6;
  --leading-relaxed: 1.7;
  --leading-loose:   1.8;

  --tracking-tight:   -0.03em;
  --tracking-normal:   0;
  --tracking-wide:     0.05em;
  --tracking-wider:    0.12em;
  --tracking-widest:   0.2em;

  /* ── Spacing (8px-Grid) ────────────────────────────────────
     Kein ad-hoc padding/margin — immer diese Variablen nutzen.
  ─────────────────────────────────────────────────────────── */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-7:   28px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;

  /* Layout */
  --max-width:         1200px;
  --max-width-narrow:  720px;
  --side-padding:      clamp(20px, 4vw, 40px);
  --section-padding-y: clamp(56px, 8vw, 100px);

  /* ── Formsprache ───────────────────────────────────────────
     Coaching/Wellness — leicht abgerundet (Kundenwunsch).
  ─────────────────────────────────────────────────────────── */
  --radius:      10px;
  --radius-sm:   6px;
  --radius-lg:   16px;
  --radius-pill: 999px;

  /* ── Shadows (subtil, premium) ───────────────────────────── */
  --shadow-sm:   0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:   0 4px 12px rgba(0,0,0,0.06), 0 2px 6px rgba(0,0,0,0.04);
  --shadow-lg:   0 12px 32px rgba(0,0,0,0.10), 0 4px 12px rgba(0,0,0,0.06);
  --shadow-dark: 0 8px 24px rgba(0,0,0,0.25);  /* Cards auf dunklen Sections */
  /* Form-Focus-Ring (Teal-Tint) + Fehlerfarbe — Brand-Werte, identisch zum
     Fragebogen-Tokenset (gemeinsame Quelle). Genutzt von /masterkurs. */
  --shadow-focus: 0 0 0 3px rgba(18, 179, 216, 0.20);
  --color-error: #C0362C;

  /* ── Transitions ────────────────────────────────────────── */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;

  /* ── Z-Index System ─────────────────────────────────────── */
  --z-base:     0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;
}

/* ── prefers-reduced-motion — PFLICHT, niemals weglassen ─── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:        0.01ms !important;
    animation-iteration-count: 1      !important;
    transition-duration:       0.01ms !important;
    scroll-behavior:           auto   !important;
  }
}

/* ── Focus-Visible — PFLICHT ────────────────────────────── */
:focus-visible {
  outline:        2px solid var(--accent);
  outline-offset: 3px;
  border-radius:  var(--radius-sm);
}