/**
 * NEPTUN DESIGN SYSTEM — TOKENS
 * Premium Automotive × Industrial × Neptun Österreich
 *
 * Diese Datei ist die einzige Quelle der Wahrheit für Farbe, Typografie,
 * Abstand, Radius und Bewegung. Komponenten referenzieren ausschließlich
 * diese Variablen, niemals Rohwerte.
 */

:root {
  /* ============ FARBE ============ */
  /* Graphit-Skala — Basis der Marke, kein reines Schwarz */
  --neptun-graphite-950: #121214; /* tiefste Fläche, große Hero-Flächen */
  --neptun-graphite-900: #17171A;
  --neptun-graphite-800: #1E1E20; /* bestehende Markenfarbe (#202020), primäre dunkle Fläche */
  --neptun-graphite-700: #2B2B2E;
  --neptun-graphite-600: #3A3A3D; /* erhöhte Flächen/Cards auf Dunkel */
  --neptun-graphite-500: #4E4E52;

  /* Stahl-Skala — Sekundärtext, Linien, ruhige UI */
  --neptun-steel-400: #86898E; /* nur für UI/Borders (3:1-Kriterium), NICHT für Fließtext */
  /* Eigene, dunklere Graustufe für Fließtext-Kontrast — entspricht der
     bereits bestehenden Neptun-Sekundärfarbe (#6D6D6D) aus dem alten
     Elementor-Kit (Phase-1-Audit). Kontrast-Fund (Phase 11): Steel-400 auf
     Weiß erreicht nur ~3,5:1 (WCAG AA verlangt 4,5:1 für normalen Text) —
     dieser Wert erreicht ~5,2:1. */
  --neptun-graphite-muted-text: #6D6D6D;
  --neptun-steel-300: #A8ABAF;
  --neptun-steel-200: #C9CBCE;
  --neptun-steel-100: #DEE0E2;

  /* Off-White / Fläche — bewusst kühl, nicht warm-cremig */
  --neptun-surface-100: #EFEFED;
  --neptun-surface-050: #F6F6F5;
  --neptun-white: #FFFFFF;

  /* Marke — Neptun Orange, einziger Akzent im System */
  --neptun-orange: #F6931E;
  --neptun-orange-hover: #C97315; /* dunkler bei Hover, nicht heller */
  /* Gedrückter Zustand und Orange auf hellem Grund, wo der Akzentton für
     Fließtext zu hell wäre. Stand vorher an drei Stellen als fester Wert —
     zweimal #A85F0F, einmal #A15F0F. Zwei kaum unterscheidbare Töne für
     dieselbe Aufgabe; jetzt ein Wert an einer Stelle. */
  --neptun-orange-active: #A85F0F;
  --neptun-orange-tint-10: rgba(246, 147, 30, 0.10);
  --neptun-orange-tint-24: rgba(246, 147, 30, 0.24);

  /* Status (funktional, kein Deko) */
  --neptun-success: #3E8E5C;
  --neptun-error: #C0392B;

  /* Semantische Zuordnung */
  --color-bg-primary: var(--neptun-graphite-950);
  --color-bg-surface: var(--neptun-white);
  --color-bg-surface-muted: var(--neptun-surface-100);
  --color-bg-elevated-dark: var(--neptun-graphite-600);
  --color-text-on-dark: var(--neptun-surface-050);
  --color-text-on-dark-muted: var(--neptun-steel-300);
  --color-text-on-light: var(--neptun-graphite-900);
  --color-text-on-light-muted: var(--neptun-graphite-muted-text);
  --color-border-on-dark: rgba(255, 255, 255, 0.12);
  --color-border-on-light: rgba(18, 18, 20, 0.10);
  --color-accent: var(--neptun-orange);
  --color-accent-hover: var(--neptun-orange-hover);

  /* ============ TYPOGRAFIE ============ */
  /* Selbst gehostet einbinden (keine Google-Fonts-CDN-Anfrage, DSGVO) */
  /* v2 — Typografie-Feinschliff: weniger "Engineering-Katalog", mehr
     "Premium Automotive / Fahrzeugkonfigurator". Sora ersetzt Archivo
     Expanded (kein "Expanded"-Charakter mehr, ruhigere Anmutung). Space
     Grotesk ersetzt JetBrains Mono für Kennzahlen (technisch-präzise,
     aber kein Terminal-/Code-Look). Produktnamen laufen bewusst NICHT
     mehr auf der Display-Ebene, siehe .product-card__title. */
  --font-display: "Sora", "Inter", sans-serif;
  --font-body: "Inter", -apple-system, "Segoe UI", sans-serif;
  --font-data: "Space Grotesk", "Inter", sans-serif;

  /* Display-Skala bewusst kompakter — Premium entsteht über Weißraum,
     nicht über maximale Größe. XL nur für den einen echten Hero-Moment. */
  /* Angehoben für stärkere Hero-Wirkung (Premium-Pass) — war 3.75rem max. */
  /* Auf großen Bildschirmen darf die Titelzeile deutlicher führen: 4,25 rem
     wirkten bei 1480 px Inhaltsbreite eher zurückhaltend als bewusst gesetzt.
     Der Startwert bleibt unverändert — auf dem Telefon war die Größe richtig,
     dort ändert sich nichts. Nur die Obergrenze wächst. */
  --fs-display-xl: clamp(2.5rem, 1.5rem + 3.4vw, 5rem);
  --fs-display-l: clamp(1.875rem, 1.45rem + 1.8vw, 3.125rem);
  --fs-display-m: clamp(1.5rem, 1.3rem + 0.8vw, 2rem);
  --fs-heading-l: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  --fs-heading-m: 1.125rem; /* Produktname-Größe, läuft auf --font-body */
  --fs-body-l: 1.125rem;
  --fs-body-m: 1rem;
  --fs-body-s: 0.9375rem;
  --fs-caption: 0.8125rem;
  --fs-data-l: clamp(1.625rem, 1.4rem + 0.9vw, 2.25rem);
  --fs-data-m: 1.25rem;
  --fs-data-s: 0.9375rem;

  --lh-display: 1.15;  /* war 1.05 — mehr Luft in großen Headlines */
  --lh-heading: 1.3;   /* war 1.2 */
  --lh-body: 1.6;
  --lh-data: 1.05;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 700; /* Alias, keine 800er-Displaygewichte mehr im Standardfluss */

  /* Bewusste Abstufung, damit nicht jede Überschrift maximal groß läuft */
  --fs-eyebrow: 0.8125rem;

  /* ============ ABSTAND (8px-Basis) ============ */
  --space-2xs: 0.25rem;  /* 4px */
  --space-xs: 0.5rem;    /* 8px */
  --space-s: 0.75rem;    /* 12px */
  --space-m: 1rem;       /* 16px */
  --space-l: 1.5rem;     /* 24px */
  --space-xl: 2rem;      /* 32px */
  --space-2xl: 3rem;     /* 48px */
  --space-3xl: 4.5rem;   /* 72px */
  --space-4xl: 6.5rem;   /* 104px */

  /* Global angehoben (war 1360px) — großzügigere Desktop-Nutzung auf großen
     Monitoren, wie gefordert. --content-max-width-wide für Bereiche, die
     bewusst breiter/nahezu full-width wirken dürfen (Hero, Produktwelten,
     große Bildkompositionen), ohne dass Textbereiche mitgezogen werden. */
  --content-max-width: 1480px;
  --content-max-width-wide: 1680px;
  --content-padding-inline: clamp(1.25rem, 4vw, 3.5rem);

  /* ============ RADIUS ============ */
  /* Bewusst klein und einheitlich gestuft — keine überall runden Pill-Formen */
  --radius-s: 4px;   /* Inputs, kleine Badges */
  --radius-m: 8px;   /* Buttons, Cards */
  --radius-l: 14px;  /* große Produktkarten, Modale */
  --radius-full: 999px; /* nur für runde Statuspunkte/Icon-Chips, nicht für Buttons */

  /* ============ SCHATTEN ============ */
  /* Sehr zurückhaltend, keine weichen "SaaS-Karten"-Schatten überall */
  --shadow-s: 0 1px 2px rgba(18, 18, 20, 0.06);
  --shadow-m: 0 4px 16px rgba(18, 18, 20, 0.10);
  --shadow-l: 0 12px 32px rgba(18, 18, 20, 0.16);
  --shadow-focus: 0 0 0 3px var(--neptun-orange-tint-24);

  /* ============ LINIEN ============ */
  --line-hairline: 1px solid var(--color-border-on-light);
  --line-hairline-dark: 1px solid var(--color-border-on-dark);
  --line-technical: 1px solid var(--neptun-steel-200); /* Trenner zwischen Kennzahlen etc. */

  /* ============ BEWEGUNG ============ */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --duration-fast: 140ms;
  --duration-standard: 240ms;
  --duration-slow: 420ms;

  /* ============ BREAKPOINTS (als Referenz, in Media Queries hart codiert) ============ */
  /* xs: 0–389px · s: 390–767px · m: 768–1023px · l: 1024–1359px · xl: 1360px+ */

  /* ============ Z-INDEX-SKALA ============ */
  --z-header: 100;
  --z-drawer: 200;
  --z-modal: 300;
  --z-toast: 400;

  /* ============ VERSATZ FÜR MITLAUFENDE ELEMENTE ============
     Höhe des Headers im zusammengeschobenen Zustand. Alles, was per
     position:sticky stehen bleibt, rechnet damit — so gibt es genau eine
     Stelle, an der sich diese Zahl ändert.

     --admin-bar-height ist im Normalfall 0 und wird nur für angemeldete
     Benutzer gesetzt. Ohne diesen Wert sahen eingeloggte Redakteure ein
     anderes Layout als Besucher: die Admin-Leiste schiebt die Seite um
     32 px nach unten, wodurch mitlaufende Elemente unter dem Header
     verschwanden. */
  --header-height: 64px;
  --admin-bar-height: 0px;
  --sticky-offset: calc(var(--header-height) + var(--admin-bar-height) + var(--space-l));

  /* ============ BEWEGUNG ============
     Drei Stufen, mehr nicht. Jede Bewegung auf der Seite gehört in genau
     eine davon — das verhindert, dass sich Übergänge über die Zeit
     auseinanderentwickeln.

     micro     Rückmeldung auf eine Eingabe (Hover, Fokus, Häkchen)
     standard  Zustandswechsel eines Elements (Karte, Akkordeon, Bildwechsel)
     cinematic nur für große Auftritte beim Scrollen, sparsam eingesetzt

     Animiert werden ausschließlich opacity, transform und clip-path —
     Eigenschaften, die die Grafikkarte übernimmt. Kein animiertes blur,
     keine Layoutwerte, damit nichts nachrutscht. */
  --motion-micro: 180ms;
  --motion-standard: 320ms;
  --motion-cinematic: 800ms;
  --ease-cinematic: cubic-bezier(0.16, 1, 0.3, 1);

  /* ============ PRODUKTBÜHNE ============
     Freigestellte Anhänger brauchen eine Fläche, auf der sie stehen können.
     Zwei Ausprägungen: hell für den Regelfall, dunkel für die wenigen
     bewussten Kontrastmomente. */
  --stage-light: radial-gradient(ellipse 62% 58% at 50% 46%, #FFFFFF 0%, var(--neptun-surface-050) 58%, var(--neptun-surface-100) 100%);
  --stage-dark: radial-gradient(ellipse 62% 58% at 50% 44%, #23232A 0%, var(--neptun-graphite-900) 55%, var(--neptun-graphite-950) 100%);
}

/* Die Admin-Leiste liegt oberhalb von 782px fest über der Seite. Darunter
   scrollt sie mit und darf deshalb nicht eingerechnet werden. */
body.admin-bar { --admin-bar-height: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar { --admin-bar-height: 0px; }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-standard: 0ms;
    --duration-slow: 0ms;
  }
}