/* ==========================================================================
   Taxi Fluor — Design Tokens (v4, "Kunden-Mock", 24.07.2026)
   Quelle: design-mock/DESIGN-VORGABE.md + taxi-fluor-website.dc.html.
   Alle Farb-, Radius-, Schatten-, Abstands- und Typografiewerte im Projekt
   MÜSSEN aus diesen Tokens kommen. Werte sind bewusst 1:1 aus dem
   Kunden-Mock übernommen (siehe DESIGN.md, "Treue zum Mock").
   ========================================================================== */

:root {
  /* -- Farbe: Marke -------------------------------------------------- */
  --color-red: #e30613;
  --color-red-hover: #c40510;      /* Buttons */
  --color-red-hover-text: #b00510; /* Textlinks */

  /* -- Farbe: Neutral -------------------------------------------------- */
  --color-heading: #2e2e30;
  --color-body: #3a3a3c;
  --color-dark-grey: #4a4a4d;      /* Band, Outline-Buttons, 24h-Banner */
  --color-muted: #6a6a6e;
  --color-white: #ffffff;

  /* -- Farbe: Fläche/Border --------------------------------------------- */
  --color-bg: #ffffff;
  --color-bg-alt: #f5f5f6;         /* Hero-Band, Karten, Referenz-Tiles-BG */
  --color-nav-hover: #f2f2f3;
  --color-border: #e6e6e8;
  --color-border-form: #c9c9cc;

  /* -- Farbe: Footer ------------------------------------------------- */
  --color-footer-bg: #2e2e30;
  --color-footer-text: #c9c9cc;
  --color-footer-muted: #9a9a9e;
  --color-footer-border: #46464a;

  /* -- Farbe: Status ---------------------------------------------------- */
  --color-success-bg: #f0f9f1;
  --color-success-border: #bfe3c3;
  --color-success-text: #20702a;
  --color-error-bg: #fbeceb;

  /* -- Farbe: Fokus ------------------------------------------------------ */
  --color-focus-border: #e30613;
  --color-focus-outline: #f5c2c5;

  /* -- Semantische Aliase ------------------------------------------------ */
  --color-text: var(--color-body);
  --color-text-muted: var(--color-muted);
  --color-accent: var(--color-red);
  --color-accent-hover: var(--color-red-hover);
  --color-surface: var(--color-white);
  --color-surface-dark: var(--color-footer-bg);

  /* -- Typografie: Familie (Source Sans 3, self-hosted) ------------------ */
  --font-body: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  --font-display: "Source Sans 3", "Segoe UI", system-ui, sans-serif;

  /* -- Typografie: Skala (exakt aus dem Mock) ----------------------------
     Der Mock nutzt feste px-Werte statt einer fluiden Skala, einzige
     Ausnahme ist H1 (siehe --text-h1). Für WCAG-Textgrössen-Zoom bleiben
     die Werte in rem definiert (16px-Basis, entspricht den px-Vorgaben). */
  --text-2xs: 0.75rem;    /* 12px: absolute Untergrenze, im Mock ungenutzt */
  --text-xs: 0.875rem;    /* 14px */
  --text-sm: 0.9375rem;   /* 15px: Badge, Footer-Bottom */
  --text-base: 1rem;      /* 16px: Banner */
  --text-md: 1.0625rem;   /* 17px: Nav, Kicker, Body-Text klein */
  --text-lg: 1.125rem;    /* 18px: Header-Phone, Body-Text */
  --text-xl: 1.1875rem;   /* 19px: Lead-Text, Buttons */
  --text-2xl: 1.25rem;    /* 20px: Hero-Lead, Eilig-Link */
  --text-3xl: 1.375rem;   /* 22px: Kontakt-Card-H2, Success-H2 */
  --text-4xl: 1.5rem;     /* 24px: Hero-CTA, Band-H3 */
  --text-5xl: 1.625rem;   /* 26px: Angebot-H3, Offerten-H2 */
  --text-6xl: 2rem;       /* 32px: H2 */
  --text-7xl: 2.375rem;   /* 38px: H1 (Unterseiten) */
  --text-h1: clamp(2.125rem, 4.5vw, 3.25rem); /* 34px–52px: H1 Startseite */

  /* -- Zeilenhöhen (exakt aus dem Mock) ----------------------------------- */
  --leading-tight: 1.08;
  --leading-snug: 1.4;
  --leading-normal: 1.55;
  --leading-relaxed: 1.6;
  --leading-loose: 1.7;

  /* -- Spacing-Scale (exakte Mock-Werte, in rem, 16px-Basis) -------------- */
  --space-4: 0.25rem;
  --space-5: 0.3125rem;
  --space-6: 0.375rem;
  --space-7: 0.4375rem;
  --space-8: 0.5rem;
  --space-9: 0.5625rem;
  --space-10: 0.625rem;
  --space-12: 0.75rem;
  --space-13: 0.8125rem;
  --space-14: 0.875rem;
  --space-15: 0.9375rem;
  --space-16: 1rem;
  --space-18: 1.125rem;
  --space-20: 1.25rem;
  --space-22: 1.375rem;
  --space-24: 1.5rem;
  --space-26: 1.625rem;
  --space-28: 1.75rem;
  --space-32: 2rem;
  --space-36: 2.25rem;
  --space-38: 2.375rem;
  --space-40: 2.5rem;
  --space-44: 2.75rem;
  --space-46: 2.875rem;
  --space-48: 3rem;
  --space-56: 3.5rem;
  --space-60: 3.75rem;
  --space-64: 4rem;
  --space-72: 4.5rem;
  --space-96: 6rem;

  /* -- Layout -------------------------------------------------------- */
  --container-max: 71.25rem;   /* 1140px, exakt Mock */
  --container-narrow: 51.25rem; /* 820px, Bestellen-Formular */

  /* -- Radien (exakt aus dem Mock) ---------------------------------------- */
  --radius-sm: 0.5rem;    /* 8px: Buttons klein, Formularfelder */
  --radius-md: 0.625rem;  /* 10px: Hero-Sekundärbutton, Referenz-Tile */
  --radius-lg: 0.75rem;   /* 12px: Fieldset, Angebot-Foto */
  --radius-xl: 0.875rem;  /* 14px: Hero-Foto, Karten, Sektionen */
  --radius-full: 999px;   /* Pill: Badge, Sticky-Call */

  /* -- Schatten ------------------------------------------------------------ */
  --shadow-sm: 0 2px 8px rgba(30, 30, 32, 0.08);
  --shadow-md: 0 8px 20px rgba(30, 30, 32, 0.14);
  --shadow-sticky: 0 6px 18px rgba(0, 0, 0, 0.25);

  /* -- Motion -------------------------------------------------------------- */
  --duration-fast: 150ms;
  --duration-normal: 220ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* -- Z-Index-Skala --------------------------------------------------- */
  --z-header: 50;
  --z-sticky-call: 60;
  --z-skip-link: 70;
}