/* ===========================================================================
 * CardiooFitness — Design Tokens (Web)
 * SoT (Begründung/Rollen): Vault → 20-Individualprojekte/CardiooFitness/Marketing/
 *                          CardiooFitness-Designsystem.md
 * Ein Token-System, zwei Themes: :root = Light (Default), [data-theme="dark"] = App-Darkmode.
 * Stand 2026-06-08. Für späteren Einbau — noch NICHT in index.html verlinkt.
 * Einbau: <link rel="stylesheet" href="tokens.css"> VOR der Inline-:root von index.html,
 *         dann die Inline-Definitionen entfernen und auf --c-* migrieren.
 * ======================================================================== */

:root {
  /* ── Marke ───────────────────────────────────────────── */
  --c-primary:        #0C7488;   /* Cyan — Marke, CTA, Links (3 Stufen dunkler, Kontrast) */
  --c-primary-deep:   #08596B;   /* Text/Hover/Outline-CTA auf hell        */
  --c-primary-light:  #1E9FBD;   /* Verläufe, helle Akzente, Hover         */
  --c-secondary:      #FF8A5B;   /* Coral — Wärme/Erinnerungs-Akzent       */
  --c-secondary-deep: #E2693A;   /* Coral-Text auf hell / Verlauf-Ende     */
  --c-success:        #15B886;   /* Mint — positive Daten (FIT, Progress)  */

  /* ── Neutrals (Light) ────────────────────────────────── */
  --c-background:     #F7F9FA;
  --c-surface:        #FFFFFF;
  --c-elevated:       #F2F6F8;
  --c-border:         #E4EBEE;
  --c-text:           #232323;
  --c-text-muted:     #5B6569;
  --c-slate:          #2A3338;   /* dunkle Sektionen/Footer, Marken-Ink    */

  /* ── Signatur-Verlauf (sparsam) ──────────────────────── */
  --c-gradient:       linear-gradient(90deg, #0C7488, #FF8A5B);

  /* ── Typografie ──────────────────────────────────────── */
  --font-display: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;

  /* ── Form & Elevation ────────────────────────────────── */
  --radius-card:    16px;
  --radius-control: 11px;
  --radius-pill:    999px;
  --shadow-card:    0 2px 10px rgba(20,40,50,.05);

  /* ── Legacy-Aliase → heutige index.html-Variablen ─────────
   * macht tokens.css drop-in: bestehendes CSS funktioniert weiter,
   * danach schrittweise auf --c-* migrieren und diesen Block entfernen. */
  --cyan:       var(--c-primary);
  --cyan-light: var(--c-primary-light);
  --slate:      var(--c-slate);
  --warm:       var(--c-secondary);
  --ink:        var(--c-text);
  --gray:       var(--c-text-muted);
  --offwhite:   var(--c-elevated);
}

/* ── Dark · App-Darkmode ───────────────────────────────────
 * Aufgehellte, klar gestaffelte Ebenen (Kontrast-korrigiert, v3).
 * Website bleibt vorerst light; Dark-Werte für App bzw. Dark-Hero-Sektionen. */
[data-theme="dark"] {
  --c-primary:        #18A6C6;
  --c-primary-deep:   #0B85A3;
  --c-primary-light:  #44C5E2;
  --c-secondary:      #FF8A5B;
  --c-secondary-deep: #FF7A4D;
  --c-success:        #5EE6B0;

  --c-background:     #0C1115;
  --c-surface:        #262F36;
  --c-elevated:       #36424B;
  --c-border:         #4C5C68;
  --c-text:           #F3F7F9;
  --c-text-muted:     #BAC6CC;
  --c-slate:          #0C1115;

  --c-gradient:       linear-gradient(90deg, #0B85A3, #FF7A4D);
  --shadow-card:      0 12px 30px rgba(0,0,0,.6);
}