/* ============================================================
   Artemed Showcase — Design Tokens (Single Source of Truth)
   Werte belegt aus Live-Recherche artemed.de (siehe
   docs/artemed-design-system.md). Issue #50.
   ============================================================ */

@font-face {
  font-family: 'FFMarselis';
  src: url('https://www.artemed.de/system/artemed-sitepackage/WebFonts/FFMarselisWebProRegular.woff2') format('woff2'),
       url('https://www.artemed.de/system/artemed-sitepackage/WebFonts/FFMarselisWebProRegular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'FFMarselis';
  src: url('https://www.artemed.de/system/artemed-sitepackage/WebFonts/FFMarselisWebProBold.woff2') format('woff2'),
       url('https://www.artemed.de/system/artemed-sitepackage/WebFonts/FFMarselisWebProBold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- Marken-Farben (belegt) --- */
  --navy: #191f3e;
  --navy-light: #2a3158;
  --navy-dark: #0f1329;
  --pink: #e93e6a;
  --pink-hover: #d9305a;
  --blue: #48a6dc;
  --green: #7ca95c;
  --green-hover: #6b9a4d;
  --green-active: #5d8a42;
  --red: #e4222e;
  --red-hover: #c91d27;
  --red-active: #b0191f;

  /* --- Semantische Aliase (Rückwärtskompatibilität) --- */
  --primary: var(--navy);
  --primary-light: var(--navy-light);
  --primary-dark: var(--navy-dark);
  --accent: var(--pink);
  --accent-hover: var(--pink-hover);
  --success: var(--green);
  --error: var(--red);

  /* --- Flächen / Text --- */
  --surface: #ffffff;
  --surface-alt: #f7f8fb;
  --bg: #f4f4f4;
  --text: var(--navy);
  --text-secondary: #586179;
  --border: #e8e7ec;
  --tint: rgba(25, 31, 62, 0.04);
  --accent-tint: rgba(233, 62, 106, 0.08);

  /* --- Signatur-Gradient (Artemed Swoosh) --- */
  --gradient-brand: linear-gradient(56deg, #e93e6a 0%, #8a4ec8 55%, #48a6dc 100%);

  /* --- Typografie-Skala --- */
  --font-sans: 'FFMarselis', Arial, Helvetica, sans-serif;
  --font-mono: 'SF Mono', 'Fira Code', 'Consolas', monospace;
  --fs-eyebrow: 0.72rem;
  --fs-xs: 0.8rem;
  --fs-sm: 0.92rem;
  --fs-base: 1rem;
  --fs-md: 1.15rem;
  --fs-lg: 1.35rem;
  --fs-xl: 1.65rem;
  --lh-tight: 1.25;
  --lh-normal: 1.5;
  --tracking-eyebrow: 0.08em;

  /* --- Spacing-Skala --- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;

  /* --- Radius --- */
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 20px;
  --radius-pill: 2.7rem;

  /* --- Schatten (Artemed-dezent) --- */
  --shadow-sm: 0 1px 2px rgba(25, 31, 62, 0.06);
  --shadow: 0 4px 16px rgba(25, 31, 62, 0.07);
  --shadow-lg: 0 8px 28px rgba(25, 31, 62, 0.10);

  /* --- Motion --- */
  --transition: 0.2s ease-out;
  --transition-slow: 0.25s ease-out;

  /* --- Touch-Targets (deckt #6: ältere Patienten) --- */
  --touch-min: 56px;

  /* --- Logo-Filter: weißes Logo-Asset → Navy für helle Flächen --- */
  --logo-to-navy: brightness(0) saturate(100%) invert(10%) sepia(30%)
                  saturate(2000%) hue-rotate(210deg) brightness(90%) contrast(100%);

  /* --- Komponenten-Tokens (#199): vorher hartkodierte Markenfarben, jetzt
     zentral überschreibbar. Default-Werte byte-gleich zu den alten Literalen. --- */
  --caption-bg: rgba(15, 19, 41, 0.82);            /* Caption-Overlay (Navy-dark transluzent) */
  --status-speaking-bg: rgba(25, 31, 62, 0.82);    /* Sprech-Status „Avatar spricht" */
  --status-processing-bg: rgba(233, 62, 106, 0.92);/* Sprech-Status „Verarbeitung" */
  --pulse-ring-start: rgba(233, 62, 106, 0.4);     /* Mikro-Pulse-Ring (Akzent) */
  --pulse-ring-end: rgba(233, 62, 106, 0);
}

/* ============================================================
   White-Label vollständig neutral (#199, erweitert #69) —
   EINZIGE zentrale Stelle der Token-Overrides. Aktiv per
   body.whitelabel (?whitelabel=1 / ?wl=1; früh gesetzt via
   Inline-Script in showcase.html/flows.html, damit weder
   Marken-Farben flashen noch FF Marselis geladen wird).

   Neutrale Palette: Slate als Primär (#334155/#475569/#1e293b),
   zurückhaltendes Stahlblau als Akzent (#4a6fa5). Grün/Rot
   bleiben — das sind semantische Status-Farben, keine Marke.

   WICHTIG: Die Aliase (--primary/--accent/--text/…) MÜSSEN hier
   re-deklariert werden: Custom Properties werden auf :root zur
   Computed-Zeit substituiert — ein reines --navy-Override auf
   body würde die auf :root gebackenen Aliase NICHT mitziehen.
   ============================================================ */
body.whitelabel {
  /* Marken-Farben → neutral */
  --navy: #334155;
  --navy-light: #475569;
  --navy-dark: #1e293b;
  --pink: #4a6fa5;
  --pink-hover: #3f5f8e;
  --blue: #64748b;

  /* Aliase re-deklariert (siehe Hinweis oben) */
  --primary: var(--navy);
  --primary-light: var(--navy-light);
  --primary-dark: var(--navy-dark);
  --accent: var(--pink);
  --accent-hover: var(--pink-hover);

  /* Flächen / Text / Tints */
  --text: var(--navy);
  --tint: rgba(51, 65, 85, 0.04);
  --accent-tint: rgba(74, 111, 165, 0.08);

  /* Signatur-Gradient → dezenter Slate-Verlauf */
  --gradient-brand: linear-gradient(56deg, #475569 0%, #334155 100%);

  /* Schrift: System-Stack statt der Marken-Schrift (kein Font-Load von artemed.de) */
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
               Arial, Helvetica, sans-serif;

  /* Komponenten-Tokens */
  --caption-bg: rgba(30, 41, 59, 0.82);
  --status-speaking-bg: rgba(51, 65, 85, 0.82);
  --status-processing-bg: rgba(74, 111, 165, 0.92);
  --pulse-ring-start: rgba(74, 111, 165, 0.4);
  --pulse-ring-end: rgba(74, 111, 165, 0);
}