/* ==========================================================================
   leomake – Design Tokens
   Werte 1:1 aus dem CI-Manual (Abschnitt 13). Nur hier zentral ändern.
   ========================================================================== */

:root {
  /* --- Farben --- */
  --color-black: #151515;      /* Anthrazitschwarz – Hauptfarbe, Flächen, Text */
  --color-black-pure: #000000;
  --color-cream: #F7F2E8;      /* Cremeweiß – helle Flächen, Text auf dunkel */
  --color-off-white: #FFFCF5;
  --color-red: #E10600;        /* Signalrot – Akzent, Buttons, Links */
  --color-red-dark: #B80500;   /* Rot Hover */
  --color-petrol: #0E3B46;     /* Deep Petrol – dezenter Sekundärakzent */
  --color-warm-grey: #BEB7AA;  /* Neutral – Linien, Sekundärtext */
  --color-soft-sand: #E8DFD2;  /* Neutral – Cards, Trenner */

  /* --- Semantische Zuordnung --- */
  --line-on-dark: rgba(247, 242, 232, 0.14);
  --line-on-light: var(--color-soft-sand);
  --text-muted-on-dark: rgba(247, 242, 232, 0.66);
  --text-muted-on-light: #6b665d;

  /* --- Typografie --- */
  --font-heading: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;

  /* Fluid Type Scale */
  --fs-hero: clamp(2.75rem, 6vw, 5.5rem);
  --fs-h2: clamp(2rem, 4vw, 3.25rem);
  --fs-h3: clamp(1.35rem, 2vw, 1.75rem);
  --fs-lead: clamp(1.05rem, 1.6vw, 1.35rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-eyebrow: 0.8125rem;

  /* --- Radius --- */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 40px;

  /* --- Layout --- */
  --container-width: 1200px;
  --container-pad: 24px;
  --section-padding-desktop: 120px;
  --section-padding-tablet: 80px;
  --section-padding-mobile: 56px;

  /* --- Motion --- */
  --transition-fast: 180ms ease;
  --transition-medium: 300ms ease;

  /* --- Elevation (dezent, kein starker Schatten laut CI) --- */
  --shadow-soft: 0 1px 2px rgba(21, 21, 21, 0.04);
}