/**
 * gofleet-tokens.css
 * GoFleet – Globale Design-Tokens
 *
 * Quelle:   docs/brand-ci.md + docs/design-system.md
 * Abgleich: Staging-Codebase (März 2026)
 * Version:  1.0.0
 *
 * Strategie: Backward-Compatible Alias-Layer
 *   – Neue kanonische Namen (--gofleet-navy, --gofleet-yellow …) zeigen auf
 *     bestehende Token-Werte (--gofleet-accent, --gofleet-orange …).
 *   – Bestehende Klassen brechen NICHT – sie nutzen die alten Namen weiter.
 *   – Neue Sektionen (.gofleet-process, .gofleet-benefits, .gofleet-faq, .gofleet-sa-usp)
 *     verwenden ausschließlich die neuen kanonischen Namen.
 */

/* ═══════════════════════════════════════════════════════════════════════════
   GLOBALE DESIGN-TOKENS  :root
   ═══════════════════════════════════════════════════════════════════════════ */

:root {

  /* ── FARBEN – Neue kanonische Namen (Alias auf bestehende Tokens) ──────── */

  /** Deep Navy Blue — 60 % Fläche: Header, Hero, Footer, CTA-Sektionen */
  --gofleet-navy:         var(--gofleet-accent);        /* bestehend: #0E2240 */
  --gofleet-navy-light:   var(--gofleet-accent-hover);  /* bestehend: #162D4A */
  --gofleet-navy-dark:    #091929;                  /* NEU: Footer-Hintergrundtiefe */

  /** Match Green — Primär: Buttons, Icons, aktive Elemente, Links */
  /* --gofleet-green bereits korrekt: #1DB954 — kein Alias nötig */
  --gofleet-green-hover:  #18A349;                  /* NEU */

  /** Signal Yellow — CTA, Highlights */
  --gofleet-yellow:       var(--gofleet-orange);        /* bestehend: #FFCE00 */
  --gofleet-yellow-hover: #E6B900;                  /* NEU */
  --gofleet-muted:        var(--gofleet-text-muted);    /* Alias für gofleet-text-muted */

  /** Ice Grey — 30 % Fläche: Sekundärflächen, Sektionen */
  --gofleet-ice:          var(--gofleet-bg);            /* bestehend: #F5F7FA */

  /** Neutral */
  --gofleet-white:        var(--gofleet-card-bg);       /* bestehend: #FFFFFF */
  --gofleet-grey-100:     var(--gofleet-border);        /* bestehend: #e5e7eb */
  --gofleet-grey-300:     var(--gofleet-text-light);    /* bestehend: #8898aa */
  --gofleet-grey-500:     var(--gofleet-text-muted);    /* bestehend: #6b7c93 */
  --gofleet-grey-700:     #374151;                  /* NEU: Body-Text auf Hell */


  /* ── TYPOGRAFIE ─────────────────────────────────────────────────────────── */

  /** Body-Font — Alias auf bestehendes --gofleet-font */
  --gofleet-font-body:    var(--gofleet-font);
  /* --gofleet-font-heading bereits korrekt: 'Montserrat', … */


  /* ── ECKRADIUS ──────────────────────────────────────────────────────────── */
  /* --gofleet-radius:    12px  — bereits definiert, behalten */
  /* --gofleet-radius-sm:  8px  — bereits definiert, behalten */

  --gofleet-radius-lg:    16px;     /* NEU: Standard für Karten */
  --gofleet-radius-xl:    24px;     /* NEU: Hero-Suchfeld, Modals */
  --gofleet-radius-pill:  9999px;   /* NEU: Pill-Tags */


  /* ── SCHATTEN ───────────────────────────────────────────────────────────── */
  /* --gofleet-shadow:       0 1px 3px …   — bereits definiert, behalten */
  /* --gofleet-shadow-hover: 0 10px 25px … — bereits definiert, behalten */

  --gofleet-shadow-green:  var(--gofleet-glow);                   /* bestehend: 0 0 20px rgba(29,185,84,.15) */
  --gofleet-shadow-yellow: 0 0 20px rgba(255, 206, 0, 0.3);  /* NEU */


  /* ── MOTION-TOKENS ─────────────────────────────────────────────────────── */

  --gofleet-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --gofleet-ease-std:    cubic-bezier(0.4, 0, 0.2, 1);
  --gofleet-ease-in:     cubic-bezier(0.4, 0, 1, 1);
  --gofleet-dur-fast:    150ms;
  --gofleet-dur-base:    250ms;
  --gofleet-dur-slow:    400ms;
  --gofleet-dur-ticker:  30s;


  /* ── LAYOUT ─────────────────────────────────────────────────────────────── */

  /*
   * Fluid Container: skaliert mit dem Viewport (90vw), maximal 1680px.
   * Bei 1440px Viewport → 1296px Content. Bei 1920px → 1680px (Cap).
   * Orientierung: finn.auto / moderne Fintech-Plattformen nutzen vw-basierte
   * Container statt hartkodierter Pixel-Limits.
   */
  --gofleet-container:          min(94vw, 1800px);

  /*
   * Fluid Gutter: Seitenabstand wächst proportional zum Viewport.
   * clamp(min, preferred, max) → 20px auf Mobile, ~4vw auf Desktop, max 72px.
   */
  --gofleet-gutter:             clamp(20px, 4vw, 72px);

  --gofleet-gap:                24px;
  --gofleet-section-pad:        96px 0;      /* Horizontales Padding via --gofleet-gutter */
  --gofleet-section-pad-mobile: 64px 0;
  --gofleet-header-h:           72px;


  /* ── BREAKPOINTS (als Token für JS-Lesbarkeit) ──────────────────────────── */
  --gofleet-bp-tablet:  768px;
  --gofleet-bp-desktop: 1024px;


  /* ── KONTEXT-TOKENS: Header ─────────────────────────────────────────────── */
  --hd-bg:          var(--gofleet-navy);
  --hd-height:      var(--gofleet-header-h);
  --hd-link-color:  rgba(255, 255, 255, 0.8);
  --hd-link-active: var(--gofleet-green);


  /* ── KONTEXT-TOKENS: Store / Listing ────────────────────────────────────── */
  --st-card-bg:     var(--gofleet-white);
  --st-card-radius: var(--gofleet-radius-lg);   /* 16px */
  --st-price-color: var(--gofleet-navy);
  --st-sidebar-w:   280px;


  /* ── KONTEXT-TOKENS: Selbstauskunft ─────────────────────────────────────── */
  --sa-step-color:  var(--gofleet-green);
  --sa-check-color: var(--gofleet-green);
  --sa-input-border: var(--gofleet-grey-100);
  --sa-active-bg:   rgba(29, 185, 84, 0.08);


  /* ── KONTEXT-TOKENS: Dashboard / Portal ─────────────────────────────────── */
  --dash-sidebar-bg: var(--gofleet-navy-light);
  --dash-accent:     var(--gofleet-green);

}


/* ═══════════════════════════════════════════════════════════════════════════
   DARK MODE – zentral über [data-theme="dark"]
   Nur surface-Token überschreiben – Brand-Farben (Green, Yellow, Navy) bleiben.
   ═══════════════════════════════════════════════════════════════════════════ */

[data-theme="dark"] {
  --gofleet-ice:      #111D2E;
  --gofleet-white:    #1A2B3C;
  --gofleet-grey-100: #243447;
  --gofleet-grey-700: #D1D5DB;
}


/* ═══════════════════════════════════════════════════════════════════════════
   TYPOGRAFIE BASIS
   ═══════════════════════════════════════════════════════════════════════════ */

.gofleet-process__title,
.gofleet-benefits__title,
.gofleet-sa-usp__title,
.gofleet-faq__header {
  font-family: var(--gofleet-font-heading, 'Montserrat', sans-serif);
}


/* ═══════════════════════════════════════════════════════════════════════════
   ICON-BASIS  (.gofleet-icon)
   ═══════════════════════════════════════════════════════════════════════════ */

.gofleet-icon {
  display:        inline-block;
  width:          24px;
  height:         24px;
  color:          var(--gofleet-green, #1DB954);
  flex-shrink:    0;
  vertical-align: middle;
}

.gofleet-icon--sm    { width: 20px; height: 20px; }
.gofleet-icon--md    { width: 32px; height: 32px; }
.gofleet-icon--lg    { width: 48px; height: 48px; }
.gofleet-icon--xl    { width: 64px; height: 64px; }

.gofleet-icon--navy   { color: var(--gofleet-navy,    #0E2240); }
.gofleet-icon--yellow { color: var(--gofleet-yellow,  #FFCE00); }
.gofleet-icon--muted  { color: var(--gofleet-grey-300, #8898aa); }
.gofleet-icon--white  { color: #fff; }

.gofleet-icon--glow {
  filter: drop-shadow(0 0 8px rgba(29, 185, 84, 0.5));
}


/* ═══════════════════════════════════════════════════════════════════════════
   LAYOUT-HELFER
   ═══════════════════════════════════════════════════════════════════════════ */

.gofleet-container {
  width:     100%;
  max-width: var(--gofleet-container, 1280px);
  margin:    0 auto;
  padding:   0 24px;
}

@media (max-width: 768px) {
  .gofleet-container { padding: 0 16px; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   UTILITY: SCREEN-READER ONLY
   ═══════════════════════════════════════════════════════════════════════════ */

.gofleet-sr-only {
  position:   absolute;
  width:      1px;
  height:     1px;
  padding:    0;
  margin:     -1px;
  overflow:   hidden;
  clip:       rect(0, 0, 0, 0);
  white-space: nowrap;
  border:     0;
}


/* ═══════════════════════════════════════════════════════════════════════════
   DEPRECATED TOKEN-REFERENZ (Kommentar-only – nicht entfernen bis Phase-2-Refactor)
   ─────────────────────────────────────────────────────────────────────────────
   --gofleet-primary     → var(--gofleet-green)    (war: #1DB954, Fehlalias)
   --gofleet-blue        → var(--gofleet-green)    (Fehlbenennung: ist grün, nicht blau)
   --gofleet-success     → var(--gofleet-green)
   --gofleet-signal      → var(--gofleet-yellow)
   --gofleet-orange      → var(--gofleet-yellow)
   --gofleet-accent      → var(--gofleet-navy)
   --gofleet-accent-hover→ var(--gofleet-navy-light)
   --gofleet-bg          → var(--gofleet-ice)
   --gofleet-font        → var(--gofleet-font-body)
   --gofleet-border      → var(--gofleet-grey-100)
   --gofleet-text-muted  → var(--gofleet-grey-500)
   --gofleet-text-light  → var(--gofleet-grey-300)
   ═══════════════════════════════════════════════════════════════════════════ */