/**
 * MediLeads Website - Design Tokens & Custom Properties
 * Single Source of Truth for Colors, Typography, Spacing, and Breakpoints
 * Color Palette Optimized for High Contrast & WCAG AA Separation (Delta E > 12)
 */

:root {
  /* Brand Primary Colors */
  --petrol: #1C2B4D;        /* Primary Dark Navy Blue */
  --petrol-deep: #0B1326;   /* Deep Night Blue (Optimized from #121E38 for Delta E 16.5 separation) */
  --teal: #1F9DA2;          /* Fresh Petrol/Teal Accent */
  --teal-soft: #D0EBEB;     /* Soft Teal Background for Badges/Pills */
  --mint: #E6F4F2;          /* Light Mint Background for Sections (Optimized from #EFF6F5) */

  /* Brand Accent Colors */
  --gold: #E5B864;          /* Warm Gold for Primary Highlight Buttons & Rating Stars */
  --gold-deep: #9E6E17;     /* Deep Amber Gold for High Contrast Text & Borders (Delta E 22.4) */

  /* Neutral & Text Colors */
  --ink: #102025;           /* Primary Body Text (Dark Teal-Black) */
  --grey: #4E6064;          /* Muted Secondary Text (WCAG AA Compliant) */
  --line: #CEDCDC;          /* Crisp Borders & Lines */
  --bg: #F6F9FA;            /* Main Page Background (Soft Off-White) */
  --white: #FFFFFF;         /* Pure White */

  /* Component Specific Colors */
  --wordmark-blue: #1C2B4D;
  --badge-inhouse-bg: #FAF2E2;
  --badge-agentur-bg: #EAF2F8;

  /* Typography Fonts */
  --font-body: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-heading: 'Archivo', sans-serif;
  --font-display: 'Archivo', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  /* Typography Sizes & Weights */
  --font-size-base: 17px;
  --line-height-base: 1.65;
  --line-height-heading: 1.15;

  /* Spacing & Layout */
  --container-max-width: 1440px;
  --container-padding: 0 24px;
  --header-height: 72px;
  --section-padding: 84px 0;
  --section-padding-tight: 56px 0;

  /* Border Radii */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-card: 14px;
  --radius-cta: 18px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  /* Animations & Transitions */
  --transition-fast: transform 0.15s ease, box-shadow 0.15s ease;
  --transition-normal: all 0.18s ease-in-out;
}

/* ==========================================================================
   Tonale Skala — Farb-Untertöne (Redesign 08/2026)
   Prinzip aus der Referenz-Analyse: Karten heben sich durch zarte
   Hintergrund-Tönung ab (statt Border/Schatten). Siehe DESIGN_ANALYSE_REFERENZ.md
   ========================================================================== */
:root {
  --teal-050: #F0F8F7;   /* hellstes Teal — Kartenton auf Pastellband */
  --teal-100: #E6F4F2;   /* = mint, Sektions-Band */
  --teal-200: #D0EBEB;   /* = teal-soft, Pastell-Karten */
  --teal-300: #A9DBDD;   /* helles Akzent-Teal (Hero-Highlight-Wort) */
  --teal-600: #17858A;   /* Hover-Zustand für teal */
  --navy-050: #E3EDF7;   /* kühles Hellblau — kräftiger für mehr Kontrast */
  --navy-100: #D9E4F0;   /* feine Abstufung / Linien auf hellen Tönen */
  --navy-800: #14213D;   /* zwischen petrol und petrol-deep */
  --gold-100: #FAF2E2;   /* Gold-Tönung für Badges */

  --container-max-width-narrow: 1240px; /* Redesign: schmalere Seitenränder */
}