/* ==========================================================================
   Design Tokens – Wunder Werkstatt
   Industrial / Automotive premium. Rot–Schwarz mit hellen Neutralflächen.
   ========================================================================== */

:root {
  /* --- Farben: Tiefe / Technik --- */
  --color-ink: #0a0b0d;          /* fast schwarz, Headerflächen */
  --color-anthracite: #15171b;   /* dunkle Premiumfläche */
  --color-anthracite-2: #1e2228; /* dunkle Karte */
  --color-graphite: #2a2f37;     /* Rahmen auf Dunkel */

  /* --- Farben: Licht / Lesbarkeit --- */
  --color-surface: #ffffff;
  --color-surface-2: #f3f4f6;    /* helle Sektion */
  --color-surface-3: #e9ebef;    /* Linien / Trenner */

  /* --- Akzent: Motorsport-Rot (gezielt) --- */
  --color-red: #e10600;
  --color-red-deep: #b30500;
  --color-red-soft: rgba(225, 6, 0, 0.12);

  /* --- Text --- */
  --color-text: #14161a;
  --color-text-muted: #5a616b;
  --color-text-invert: #f4f5f7;
  --color-text-invert-muted: #a6adb8;

  /* --- Typografie --- */
  --font-display: "Saira", "Arial Narrow", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --text-kicker: 0.78rem;
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.1rem);
  --text-lead: clamp(1.1rem, 1rem + 0.6vw, 1.35rem);
  --text-h3: clamp(1.3rem, 1.1rem + 1vw, 1.75rem);
  --text-h2: clamp(2rem, 1.4rem + 2.6vw, 3.4rem);
  --text-hero: clamp(2.7rem, 1.2rem + 6.5vw, 6.2rem);
  --text-price: clamp(2.6rem, 1.6rem + 4vw, 5rem);

  --tracking-kicker: 0.22em;
  --leading-tight: 1.02;
  --leading-snug: 1.18;
  --leading-body: 1.62;

  /* --- Spacing --- */
  --space-2xs: 0.4rem;
  --space-xs: 0.75rem;
  --space-sm: 1.1rem;
  --space-md: 1.75rem;
  --space-lg: 2.75rem;
  --space-xl: 4.5rem;
  --space-section: clamp(4rem, 3rem + 6vw, 9rem);

  /* --- Layout --- */
  --container: 1240px;
  --container-narrow: 860px;
  --gutter: clamp(1.25rem, 0.5rem + 3vw, 3rem);
  --header-h: 76px;

  /* --- Form / Kanten --- */
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 18px;

  /* --- Schatten (kontrolliert) --- */
  --shadow-sm: 0 1px 2px rgba(10, 11, 13, 0.06), 0 2px 8px rgba(10, 11, 13, 0.05);
  --shadow-md: 0 12px 30px -12px rgba(10, 11, 13, 0.25);
  --shadow-lg: 0 30px 60px -24px rgba(10, 11, 13, 0.45);
  --shadow-red: 0 14px 34px -12px rgba(225, 6, 0, 0.5);

  /* --- Motion --- */
  --duration-fast: 160ms;
  --duration-normal: 320ms;
  --duration-slow: 620ms;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out: cubic-bezier(0.33, 1, 0.68, 1);

  /* --- Z --- */
  --z-header: 100;
  --z-mobilebar: 120;
  --z-overlay: 200;
  --z-lightbox: 300;
}