/* ============================================================
   VENT3X - Design Tokens (Single Source of Truth)
   Aus dem Claude-Design-Handoff (vent3x-design-system, --vx-* Prefix).
   Near-monochrome Ink/Paper-System, ein warmer Orange-Akzent, ein
   spektraler Gradient NUR als 2px-Divider. Per-Sektion-Pixel-Tokens
   (alte --cases-*, --advantages-* etc.) bewusst entfernt.
   ============================================================ */

:root {
  /* ---------- Base ink & paper ---------- */
  --vx-ink: #171717;          /* Primaer-Vordergrund / dunkle Flaechen */
  --vx-ink-pure: #000000;     /* schwerste Headlines */
  --vx-paper: #e7e7e7;        /* Seiten-Hintergrund (User-Entscheidung 29.05.) */
  --vx-paper-pure: #ffffff;   /* Cards / helle Surfaces */
  --vx-paper-soft: #f5f5f5;   /* on-dark Text, weiche helle Fuellung */

  /* ---------- Ink-Alphas (auf hell) ---------- */
  --vx-ink-60: rgba(23, 23, 23, 0.6);    /* Sekundaertext (>=4.5:1 auf paper) */
  --vx-ink-34: rgba(23, 23, 23, 0.34);   /* Ghost-Headline-Layer */
  --vx-ink-warm-60: rgba(34, 30, 23, 0.6);
  --vx-rating: #232323;
  --vx-rating-60: rgba(27, 26, 25, 0.6);

  /* ---------- Paper-Alphas (auf dunkel) ---------- */
  --vx-on-dark: #f5f5f5;
  --vx-on-dark-60: rgba(255, 255, 255, 0.6);
  --vx-on-dark-50: rgba(255, 255, 255, 0.5);
  --vx-on-dark-40: rgba(255, 255, 255, 0.4);
  --vx-on-dark-20: rgba(255, 255, 255, 0.2);
  --vx-on-dark-faded: rgba(255, 255, 255, 0.5); /* gedimmtes Weiss ~5.3:1 auf #171717 */
  --vx-border-on-dark: #ffffff;
  --vx-border-on-dark-soft: rgba(255, 255, 255, 0.08);
  --vx-grad-on-dark-start: rgba(255, 255, 255, 0.02);
  --vx-grad-on-dark-end: rgba(255, 255, 255, 0.04);

  /* ---------- Hairlines & Borders ---------- */
  --vx-hairline: rgba(0, 0, 0, 0.07);    /* Grid-Linien auf hell */
  --vx-hairline-on-dark: rgba(255, 255, 255, 0.07);
  --vx-border-step: #e4e4e4;             /* gestapelte Listen-Borders */
  --vx-overlay-dim: rgba(0, 0, 0, 0.1);

  /* ---------- Brand-Akzent + Spektral-Palette (Design-System-Update 2026-07-02) ----------
     Near-monochrome Ink/Paper. Die EINZIGE Chroma: ein warmer Orange-Akzent +
     ein 5-Stop-Spektral-Gradient, der AUSSCHLIESSLICH als 2px-Divider unter
     CTA-Buttons benutzt wird. Nie eine grosse Flaeche mit dem Gradient fuellen.
     (Loest die alte Lime-Palette #EBFF44 ab.) */
  --vx-accent: #f34819;        /* warmer Orange-Akzent (einzige Akzentfarbe) */
  /* Spektral-Stops - NUR fuer den Divider-Gradient (magenta -> cyan -> grey -> coral -> orange) */
  --vx-spectral-magenta: #e2178c;
  --vx-spectral-cyan: #12c2d6;
  --vx-spectral-grey: #8a8a8a;
  --vx-spectral-coral: #ff6b4a;
  --vx-spectral-orange: #f34819; /* == accent */
  /* Interaktiver Fokus: Orange ~3.2:1 auf hell (>=3:1 fuer 2px-Outline), ~3.7:1 auf dunkel. */
  --vx-focus: var(--vx-accent);

  /* Glow-Tints (sehr sparsam, aktuell ungenutzt) */
  --vx-glow-1: var(--vx-accent);
  --vx-glow-2: var(--vx-spectral-coral);
  --vx-glow-3: var(--vx-spectral-magenta);

  /* 2px-Spektral-Divider unter CTA-Buttons: die EINZIGE Gradient-Nutzung. */
  --vx-gradient-divider: linear-gradient(
    90deg,
    var(--vx-spectral-magenta) 0%,
    var(--vx-spectral-cyan) 25%,
    var(--vx-spectral-grey) 50%,
    var(--vx-spectral-coral) 75%,
    var(--vx-spectral-orange) 100%
  );

  /* ---------- Familien ---------- */
  --vx-font-display: "Sora", system-ui, sans-serif;
  --vx-font-body: "Geist", system-ui, sans-serif;
  --vx-font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", monospace;

  /* ---------- Gewichte ---------- */
  --vx-weight-medium: 500;
  --vx-weight-semibold: 600;
  --vx-weight-bold: 700;
  --vx-weight-extrabold: 800;

  /* ---------- Feste Display-Groessen (Sora, Figma-Anker @1920) ---------- */
  --vx-text-display-xl: 224px;   /* Mega-Wordmark (News) */
  --vx-text-display-lg: 81px;
  --vx-text-display-md: 68px;
  --vx-text-display-hero: 100px; /* Hero / "Why companies" */
  --vx-text-display-sm: 44px;
  --vx-text-stat: 64px;          /* grosse Stat-Zahlen */

  /* ---------- Fluide Display-Skala (responsiv, Anker = feste px oben) ---------- */
  --vx-fluid-display-xl: clamp(3.25rem, 11vw, 224px);
  --vx-fluid-hero: clamp(2.75rem, 8vw, 100px);
  --vx-fluid-display-lg: clamp(2.5rem, 6.2vw, 81px);
  --vx-fluid-display-md: clamp(2.25rem, 5vw, 68px);
  --vx-fluid-display-sm: clamp(1.75rem, 3.4vw, 44px);
  --vx-fluid-stat: clamp(2.5rem, 5vw, 64px);

  /* ---------- Heading-Groessen ---------- */
  --vx-text-heading-lg: clamp(1.5rem, 2.2vw, 30px);
  --vx-text-heading-md: clamp(1.25rem, 1.8vw, 22px);
  --vx-text-heading-sm: 18px;

  /* ---------- Body-Groessen (Geist) ---------- */
  --vx-text-body-xl: clamp(1.375rem, 2.4vw, 32px);
  --vx-text-body-lg: clamp(1.25rem, 1.8vw, 24px);
  --vx-text-body-md: 18px;

  /* ---------- Meta-Groessen (IBM Plex Mono) ---------- */
  --vx-text-button: 15px;
  --vx-text-meta-md: 15px;
  --vx-text-meta-lg: 13px;
  --vx-text-meta-sm: 11px;

  /* ---------- Line-Heights ---------- */
  --vx-leading-tight: 1;
  --vx-leading-button: 0.9;
  --vx-leading-display: 1.1;
  --vx-leading-heading: 1.3;
  --vx-leading-snug: 1.35;
  --vx-leading-relaxed: 1.4;
  --vx-leading-body: 1.55;

  /* ---------- Letter-Spacing (Figma-genau, px) ---------- */
  --vx-tracking-display-xl: -15.68px;
  --vx-tracking-display-lg: -5.67px;
  --vx-tracking-display-md: -3.4px;
  --vx-tracking-display-hero: -5px;
  --vx-tracking-display-sm: -2.2px;
  --vx-tracking-stat: -3.2px;
  --vx-tracking-heading-lg: -1.5px;
  --vx-tracking-heading-md: -1.1px;
  --vx-tracking-heading-sm: -0.9px;
  --vx-tracking-body-lg: -0.48px;
  --vx-tracking-body-md: -0.36px;
  --vx-tracking-button: -0.45px;
  --vx-tracking-meta-md: -0.3px;
  --vx-tracking-meta-lg: -0.65px;
  --vx-tracking-meta-sm: -0.22px;

  /* ---------- Spacing-Skala (8pt-ish) ---------- */
  --vx-space-1: 4px;
  --vx-space-2: 8px;
  --vx-space-3: 12px;
  --vx-space-4: 16px;
  --vx-space-5: 24px;
  --vx-space-6: 32px;
  --vx-space-7: 48px;
  --vx-space-8: 64px;
  --vx-space-9: 96px;
  --vx-space-10: 128px;

  /* ---------- Radien ---------- */
  --vx-radius-xs: 8px;
  --vx-radius-sm: 10px;
  --vx-radius-md: 16px;
  --vx-radius-pill: 50px;
  --vx-radius-circle: 100px;

  /* ---------- Grid & Layout ---------- */
  --vx-canvas: 1920px;                 /* Design-Canvas-Cap */
  --vx-section-pad: clamp(64px, 9vw, 128px); /* vertikaler Sektions-Rhythmus */
  --vx-content-max: 1200px;            /* lesbare Inhaltsbreite fuer Fliesstext */

  /* ECHTES 12-Spalten-Grid (Etappe 32).
     Das Feld liegt zwischen --vx-grid-margin links/rechts. Container-Padding UND
     die Signatur-Linien benutzen DASSELBE Token -> beide fallen immer zusammen.
     Die 5 dekorativen Linien = die Haupt-Gridlinien 1/4/7/10/13 (jede 3. Spalte). */
  --vx-grid-cols: 12;
  --vx-grid-margin: clamp(20px, 3.646%, 70px); /* Feld-Inset = Container-Pad = Linie 1/5 */
  --vx-grid-gutter: clamp(24px, 3vw, 56px); /* Innen-Abstand zur Spaltenkante (gap:0) */
  --vx-gutter: var(--vx-grid-margin); /* Alias (Rueckwaerts-Kompatibilitaet) */
  /* Linien aus dem Feld abgeleitet: Quartal-Positionen des Feldes. Die % loesen
     gegen die Container-Breite auf (dort wird das Backdrop gezeichnet). */
  --vx-field: calc(100% - 2 * var(--vx-grid-margin));
  --vx-col-1: var(--vx-grid-margin);
  --vx-col-2: calc(var(--vx-grid-margin) + var(--vx-field) * 0.25);
  --vx-col-3: 50%;
  --vx-col-4: calc(var(--vx-grid-margin) + var(--vx-field) * 0.75);
  --vx-col-5: calc(100% - var(--vx-grid-margin));

  /* ---------- Komponenten-Groessen ---------- */
  --vx-button-h: 70px;
  --vx-button-h-sm: 60px;
  --vx-button-pad: 30px;
  --vx-plus-size: 9px;
  --vx-dot-size: 7px;
  --vx-avatar-sm: 36px;
  --vx-avatar-md: 42px;
  --vx-nav-icon: 60px;
  --vx-tap-min: 44px;          /* min. Touch-Target */

  /* ---------- Schatten (sehr zurueckhaltend) ---------- */
  --vx-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.05);
  --vx-shadow-pop: 0 10px 30px rgba(0, 0, 0, 0.1);

  /* ---------- Motion ---------- */
  --vx-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --vx-dur-fast: 150ms;
  --vx-dur-normal: 250ms;

  /* ---------- Semantische Aliases ---------- */
  --vx-bg: var(--vx-paper);
  --vx-surface: var(--vx-paper-pure);
  --vx-surface-dark: var(--vx-ink);
  --vx-surface-dark-hover: #0e0e0e;
  --vx-text: var(--vx-ink);
  --vx-text-muted: var(--vx-ink-60);
  --vx-text-ghost: var(--vx-ink-34);
  --vx-text-on-dark: var(--vx-on-dark);
  --vx-text-on-dark-muted: var(--vx-on-dark-60);
  --vx-border: var(--vx-hairline);
}