/* ============================================================
   ÜBERSCHALL · DESIGN SYSTEM
   Globale Design-Tokens als CSS Custom Properties.
   Basiert auf design-system/ueberschall-homepage-v2.html.
   Wird als erstes geladen – alle anderen Stylesheets bauen darauf auf.
   ============================================================ */

/* === COLORS === */
:root {
  /* Brand-Akzente (Gradient-Stops) */
  --solar:   #F2A03D;
  --coral:   #E94B7C;
  --magenta: #A855C7;
  --cyan:    #3DBFEF;

  /* === Flächen (dunkel → erhöht) ===
     Brand-Schwarz: --void (#0A0A0F).
     Subtiler Blue-Cast (B=15 vs R/G=10), wirkt high-end ohne als Farbe lesbar
     zu sein. Kombinierbar mit warmen UND kühlen Akzenten. Wiederverwendbar
     für künftige Projekte. */
  --void:          #0A0A0F; /* Body-Hintergrund — Brand-Schwarz */
  --surface-deep:  #0E0E14; /* Trust-Bar, Brüder-/Footer-Bänder */
  --surface:       #16161D; /* Cards */
  --elevated:      #27272F; /* Bild-Platzhalter, höchste Ebene */

  /* Text */
  --bone:      #F4F4F5; /* Primärtext */
  --text-soft: #D4D4D8; /* Fließtext / Nav */
  --muted:     #9CA3AF; /* Sekundär / Labels */

  /* Linien & Hover-Flächen (rgba auf Bone) */
  --border:        rgba(244, 244, 245, 0.08);
  --border-strong: rgba(244, 244, 245, 0.10);
  --border-hover:  rgba(244, 244, 245, 0.20);
  --border-cta:    rgba(244, 244, 245, 0.25);
  --surface-hover: rgba(244, 244, 245, 0.05);
}

/* === TYPOGRAPHY === */
:root {
  --font-display: 'Switzer', system-ui, sans-serif;        /* Headlines */
  --font-body:    'Inter', system-ui, sans-serif;          /* Fließtext */
  --font-mono:    'Martian Mono', ui-monospace, monospace; /* Akzente, dosiert */

  /* Schriftgrößen */
  --fs-mono-xs: 9.5px;
  --fs-mono-sm: 11px;
  --fs-xs:      13px;
  --fs-sm:      14px;
  --fs-base:    16px;
  --fs-md:      17px;
  --fs-lg:      20px;
  --fs-xl:      24px;
  --fs-2xl:     40px;
  --fs-hero:    80px;

  /* Laufweiten */
  --ls-tight:   -0.02em;
  --ls-tighter: -0.04em;
  --ls-mono:     0.08em;
  --ls-wide:     0.15em;
}

/* === SPACING === */
:root {
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;

  --container-max: 1480px;
  --gutter:        2rem; /* horizontaler Seitenrand (Desktop) — knapper, mehr Präsenz */
  --gutter-mobile: 1.5rem;
  --header-h:      88px; /* Sticky-Header: sp-6×2 padding (48px) + nav-cta button (~40px) */
}

/* Auf ultra-wide Screens den Content-Container mit-atmen lassen */
@media (min-width: 1720px) {
  :root { --container-max: 1680px; }
}
@media (min-width: 1920px) {
  :root { --container-max: 1840px; }
}
@media (min-width: 2400px) {
  :root { --container-max: 2080px; }
}

/* === BORDER RADIUS === */
:root {
  --r-sm:   6px;
  --r-md:   8px;
  --r-lg:  10px;
  --r-xl:  12px;
  --r-2xl: 14px;
  --r-full: 50%;
}

/* === GRADIENTS === */
:root {
  /* Signatur-Verlauf über alle vier Akzentfarben */
  --gradient-signature: linear-gradient(90deg, #F2A03D, #E94B7C 40%, #A855C7 65%, #3DBFEF);

  /* Akzent-Striche der Service-Cards */
  --grad-accent-1: linear-gradient(90deg, var(--solar), var(--coral));
  --grad-accent-2: linear-gradient(90deg, var(--coral), var(--magenta));
  --grad-accent-3: linear-gradient(90deg, var(--magenta), var(--cyan));

  /* Avatare */
  --grad-avatar-j: linear-gradient(135deg, var(--solar), var(--coral));
  --grad-avatar-a: linear-gradient(135deg, var(--magenta), var(--cyan));

  /* Primär-Button */
  --grad-button: linear-gradient(90deg, var(--coral), var(--magenta));
}