/* =============================================================
   BikePass Design Tokens — Single Source of Truth
   Basis: homepage-v4.html v12.9.2 (Stand: 2026-05-24)
   ============================================================= */

:root {
  /* -----------------------------------------------------------
     Brand-Farben
     ----------------------------------------------------------- */
  --brand-teal:        #36D0BC;
  --brand-teal-hover:  #14b8a6;
  --brand-teal-deep:   #0d9488;
  --brand-teal-light:  #e6f7f5;
  --brand-ink:         #0f172a;

  /* -----------------------------------------------------------
     Slate-Palette (Tailwind-equivalent — v1.1.9: ergänzt für m5 aus Code-Review)
     Aktuell noch hex-coded in plugin.css/home.css verstreut — Tokens stehen
     bereit für zukünftige Refactor-Passes.
     ----------------------------------------------------------- */
  --slate-100: #f1f5f9;   /* Hover-BG Outline-Buttons */
  --slate-200: #e2e8f0;   /* Border-Default */
  --slate-300: #cbd5e1;   /* Footer-Text · Steps-Dot inactive · Hover-Border */
  --slate-400: #94a3b8;   /* Sekundärer Text */
  --slate-600: #475569;   /* EU-Card Body-Copy */

  /* -----------------------------------------------------------
     Background-Varianten
     ----------------------------------------------------------- */
  --bg-dark:        #050a14;
  --bg-mint-tint:   #f6fffa;

  /* -----------------------------------------------------------
     Mesh-Aurora Overlays (radial-gradient Quellen)
     ----------------------------------------------------------- */
  --mesh-teal:  rgba(54, 208, 188, 0.18);
  --mesh-mint:  rgba(167, 243, 208, 0.22);
  --mesh-cream: rgba(254, 240, 138, 0.10);
  --mesh-red:   rgba(255, 77, 77, 0.08);

  /* -----------------------------------------------------------
     Typografie
     ----------------------------------------------------------- */
  --font-display: 'Bebas Neue', Impact, sans-serif;
  --font-sans:    'Geist', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Heading-Skalen (clamp: min, fluid, max) */
  --fs-h-hero:      clamp(2.5rem, 6vw, 5.25rem);
  --fs-h-hero-sub:  clamp(1.25rem, 3vw, 2.625rem);     /* ~50% h-hero */
  --fs-h-section:   clamp(2.25rem, 4.4vw, 3.75rem);
  --fs-h-statement: clamp(3rem, 8vw, 7rem);            /* USP-Snap / Final-CTA */

  /* Mobile-Override für Hero (v12.7: ~18% kleiner) */
  --fs-h-hero-mobile: clamp(2.25rem, 9.5vw, 3.15rem);

  /* Eyebrow */
  --fs-eyebrow:           0.78rem;
  --fs-eyebrow-mobile:    clamp(0.72rem, 2.6vw, 0.82rem);
  --ls-eyebrow:           0.16em;

  /* Body */
  --fs-body:        1rem;
  --lh-body:        1.55;
  --lh-display:     1.02;

  /* -----------------------------------------------------------
     Spacing — Single source für alle Box-Sections + Section-Padding
     ----------------------------------------------------------- */
  /* v12.9: Box-Inset Mobile auf Bento-Wert hochgezogen (20px Mobile / 24px Desktop)
     v1.4.7: Mobile-Inset reduziert auf 1rem (16px) analog Header-Bar — User-Wunsch näher am Rand */
  --section-inset-x: clamp(1rem, 2vw, 1.5rem);
  --section-pad-x:   clamp(1.25rem, 4vw, 4rem);
  --section-pad-y:   clamp(5rem, 8vw, 8rem);
  --header-h:        72px;
  --vh-content:      calc(100vh - var(--header-h));
  --svh-content:     calc(100svh - var(--header-h));

  /* -----------------------------------------------------------
     Radii
     ----------------------------------------------------------- */
  --radius-card:    1.5rem;
  --radius-section: 2rem;
  --radius-pill:    9999px;

  /* -----------------------------------------------------------
     Shadows
     ----------------------------------------------------------- */
  --shadow-card:       0 1px 2px rgba(15,23,42,0.04), 0 18px 36px -20px rgba(15,23,42,0.10);
  --shadow-card-hover: 0 2px 4px rgba(15,23,42,0.06), 0 28px 48px -20px rgba(15,23,42,0.16);
  --shadow-floating:   0 18px 36px -14px rgba(15,23,42,0.22);

  /* -----------------------------------------------------------
     Button-Glow (teal shadow für CTAs)
     ----------------------------------------------------------- */
  --shadow-btn-primary:       0 0.6em 1.4em -0.4em hsla(173, 75%, 38%, 0.55);
  --shadow-btn-primary-hover: 0 0.9em 1.8em -0.4em hsla(173, 75%, 38%, 0.75);
  --shadow-btn-on-image:       0 0.7em 1.5em -0.4em hsla(173, 75%, 35%, 0.70);
  --shadow-btn-on-image-hover: 0 1em   2em   -0.4em hsla(173, 75%, 38%, 0.85);

  /* -----------------------------------------------------------
     Motion
     ----------------------------------------------------------- */
  --ease-out-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out-quart:  cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:        150ms;
  --dur-base:        250ms;
  --dur-slow:        450ms;
}