/* =============================================================
   tokens.css — Autohaus Odenwälder (ah-odenwaelder.de)
   Entscheidung: CLONE (1:1).

   Alle Werte am 2026-08-10 aus den Live-Computed-Styles gelockt
   (tools/tokens-probe.mjs -> tools/tmp/tokens-probe.json):
   - Elementor Kit 7647: --e-global-color-* / --e-global-typography-*
     (https://ah-odenwaelder.de/wp-content/uploads/elementor/css/post-7647.css)
   - getComputedStyle: body, h1, h2, h3, .elementor-button, footer, .e-con
   Keine geratenen Werte, keine offenen CONFIRMs mehr.
   ============================================================= */
:root {
  /* ---- Farben (Elementor Globals, Kit 7647) ---- */
  --color-accent:         #751329; /* --e-global-color-accent, Buttons/Links/Kicker */
  --color-accent-hover:   #5c0f20; /* abgeleitet (Hover), Live nutzt Opacity-Shift */
  --color-accent-ink:     #ffffff;
  --color-accent-soft:    #fbe3e3; /* --e-global-color-9166b26 */

  --color-heading:        #212121; /* --e-global-color-primary */
  --color-ink:            #333333; /* computed body color */
  --color-muted:          #6b7280; /* Sekundärtext (Live: Tailwind-Grau der Cards) */

  --color-surface:        #ffffff;
  --color-surface-alt:    #f8f9fa; /* --e-global-color-secondary, Footer + helle Sektionen */
  --color-surface-alt-2:  #f9fafb; /* Sektion "Über uns & Karriere" / "Kontakt" */
  --color-surface-alt-3:  #f3f4f6; /* Sektion "Gebrauchtwagen" / "Fahrzeugankauf" */
  --color-border:         #e5e7eb;
  --color-border-strong:  #d1d5db;

  --color-footer-surface: #f8f9fa; /* Footer ist hell, nicht dunkel */
  --color-footer-ink:     #333333;

  --color-success:        #2f7d67; /* --e-global-color-e0dfe63 */
  --color-danger:         #ea4746; /* --e-global-color-492b5db */

  /* ---- Typografie ----
     Display/Headings: "Distinct Style" (Custom Font, vom WP-Host selbst gehostet,
     nur ein Schnitt; Versalschrift). Body: Poppins (self-hosted woff). */
  --font-heading: "Distinct Style", "Poppins", system-ui, sans-serif;
  --font-body:    "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-h1: 42px;
  --fs-h2: 42px;
  --fs-h3: 17px;
  --fs-h4: 20px;
  --fs-body: 15px;
  --fs-small: 13px;
  --fs-kicker: 14px;

  --lh-heading: 1.2;
  --lh-body: 1.5;
  --ls-h1: -1.5px;
  --ls-kicker: 8px;   /* Kicker: uppercase, letter-spacing, weight 300 */

  --fw-heading: 400;   /* Distinct Style hat nur "normal" */
  --fw-body: 300;      /* --e-global-typography-text-font-weight */
  --fw-medium: 500;
  --fw-semibold: 600;

  --header-height: 88px;
  --container-max: 1320px;   /* .e-con-inner bei 1440 => 1320px */
  --container-pad: 20px;     /* .e-con padding: 0 20px */
  --section-pad-y: 80px;
  --section-pad-y-sm: 48px;
  --gap: 24px;
  --gap-lg: 32px;

  /* ---- Radien & Schatten ---- */
  --radius-btn:  7px;   /* computed .elementor-button */
  --radius-card: 16px;  /* Suchkarte/Cards im Hero + Content */
  --radius-input: 8px;
  --radius-img:  0px;   /* Live: Bilder ohne Radius */
  --shadow-card: 0 4px 24px rgba(17, 17, 17, .06);
  --shadow-card-hover: 0 8px 32px rgba(17, 17, 17, .10);

  /* ---- Buttons ---- */
  --btn-pad: 12px 24px;

  /* ---- Breakpoints (Elementor custom breakpoints, aus post-7647.css) ---- */
  --bp-sm: 480px;
  --bp-md: 767px;
  --bp-lg: 880px;
  --bp-xl: 1024px;
  --bp-2xl: 1200px;
  --bp-3xl: 1366px;

  /* ---- Motion ---- */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --dur: .2s;
}

/* Mobile Typo-Stufen */
@media (max-width: 1024px) {
  :root { --fs-h1: 34px; --fs-h2: 32px; --section-pad-y: 64px; }
}
@media (max-width: 767px) {
  :root {
    --fs-h1: 28px; --fs-h2: 26px; --ls-h1: -1px;
    --ls-kicker: 5px;
    --section-pad-y: 48px; --container-pad: 12px; --gap: 16px;
  }
}