/* ============================================================
   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%);
}