/*
  Design Tokens – Td Sanierungs GmbH
  Farben laut Vorgabe: Primärblau #2470B6, Weiß, Schwarz.
  Graustufen und Navy-Ton wurden ergänzt für Section-Backgrounds und Kontrastflächen.

  Typografie: Manrope (Headlines) + Inter (Fließtext).
  Beide sind geometrische, gut lesbare Sans-Serif-Schriften. Manrope bringt für
  Headlines eine kräftige, moderne Note ohne verspielt zu wirken; Inter ist eine der
  am besten lesbaren Schriften für Fließtext/UI und wird von vielen seriösen
  B2B/B2C-Marken verwendet. Die Kombination wirkt hochwertig, klar und vertrauenswürdig
  – passend für eine Handwerker-/Sanierungsmarke, die Kompetenz statt Verspieltheit zeigen soll.
*/

:root {
  /* Brand */
  --color-primary: #2470b6;
  --color-primary-dark: #1d5c92;
  --color-primary-600: #1d5c92;
  --color-primary-700: #164a76;
  --color-primary-50: #eaf2fa;
  --color-primary-100: #d3e5f5;

  --color-black: #000000;
  --color-white: #ffffff;

  /* Neutrals */
  --color-gray-50: #f7f9fb;
  --color-gray-100: #eef1f5;
  --color-gray-200: #e2e7ed;
  --color-gray-300: #cdd5df;
  --color-gray-400: #9aa5b1;
  --color-gray-500: #717d8a;
  --color-gray-600: #4d5561;
  --color-gray-700: #333a42;
  --color-gray-900: #14171a;

  /* Kontrast-/Navy-Flächen (Hero-Overlay, dunkle Sections) */
  --color-navy-900: #0a1a2b;
  --color-navy-800: #102338;
  --color-navy-700: #16324c;

  /* Semantik */
  --color-bg: var(--color-white);
  --color-bg-muted: var(--color-gray-50);
  --color-bg-muted-alt: var(--color-gray-100);
  --color-border: var(--color-gray-200);
  --color-text: var(--color-gray-900);
  --color-text-muted: var(--color-gray-600);
  --color-text-on-dark: var(--color-white);
  --color-text-on-dark-muted: #b7c4d4;

  /* Typografie */
  --font-heading: "Manrope", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;

  --fs-h1: clamp(2.25rem, 1.7rem + 2.4vw, 3.75rem);
  --fs-h2: clamp(1.75rem, 1.4rem + 1.5vw, 2.75rem);
  --fs-h3: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --fs-lead: clamp(1.05rem, 1rem + 0.3vw, 1.25rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-eyebrow: 0.8125rem;

  --lh-tight: 1.15;
  --lh-snug: 1.35;
  --lh-normal: 1.6;

  /* Spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3rem;
  --space-9: 4rem;
  --space-10: 5rem;
  --space-11: 6.5rem;

  --container-max: 1280px;
  --container-pad: clamp(1.25rem, 4vw, 2.5rem);

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(10, 26, 43, 0.06);
  --shadow-md: 0 8px 24px rgba(10, 26, 43, 0.08);
  --shadow-lg: 0 20px 48px rgba(10, 26, 43, 0.14);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 0.18s;
  --dur-base: 0.32s;
  --dur-slow: 0.6s;

  --header-height: 76px;
}