/* ═══════════════════════════════════════════════════════════════
   STS GmbH & Co. KG — Design-System
   Generiert: 2026-05-12
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ── Farben: Hintergründe ── */
  --color-bg:             #ffffff;
  --color-bg-alt:         #f4f7fb;
  --color-bg-card:        #ffffff;
  --color-surface:        #ffffff;

  /* Dunkle Sektionen (Hero, CTA-Banner) */
  --color-dark:           #0a1628;
  --color-dark-alt:       #142339;
  --color-dark-card:      #1a2c47;
  --color-dark-surface:   rgba(255, 255, 255, 0.04);

  /* ── Farben: Text ── */
  --color-text:           #1a2236;
  --color-text-dim:       #5a6b85;
  --color-text-faint:     #94a3b8;
  --color-text-heading:   #0a1628;

  --color-text-on-dark:         #ffffff;
  --color-text-on-dark-dim:     rgba(255, 255, 255, 0.72);
  --color-text-on-dark-faint:   rgba(255, 255, 255, 0.50);

  /* ── Akzent (STS-Blau) ── */
  --color-accent:         #1d7fd4;
  --color-accent-hover:   #2e96ee;
  --color-accent-dark:    #1668b0;
  --color-accent-light:   #e8f2fc;
  --color-accent-glow:    rgba(29, 127, 212, 0.18);

  /* ── Border ── */
  --color-border:           rgba(10, 22, 40, 0.08);
  --color-border-strong:    rgba(10, 22, 40, 0.16);
  --color-border-on-dark:   rgba(255, 255, 255, 0.10);
  --color-border-on-dark-strong: rgba(255, 255, 255, 0.22);

  /* ── Status ── */
  --color-success:        #10b981;
  --color-error:          #ef4444;
  --color-warning:        #f59e0b;

  /* ── Typografie ── */
  --font-heading:   'Manrope', system-ui, -apple-system, sans-serif;
  --font-body:      'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:      'JetBrains Mono', ui-monospace, monospace;

  --fs-hero:        clamp(2.5rem, 6vw, 4.5rem);
  --fs-h1:          clamp(2rem, 4.5vw, 3rem);
  --fs-h2:          clamp(1.625rem, 3.5vw, 2.25rem);
  --fs-h3:          clamp(1.25rem, 2.2vw, 1.5rem);
  --fs-h4:          1.125rem;
  --fs-body-lg:     1.125rem;
  --fs-body:        1rem;
  --fs-small:       0.875rem;
  --fs-tiny:        0.75rem;

  --lh-tight:       1.15;
  --lh-snug:        1.3;
  --lh-base:        1.6;
  --lh-relaxed:     1.75;

  --tracking-tight:   -0.02em;
  --tracking-base:    -0.005em;
  --tracking-wide:    0.04em;
  --tracking-widest:  0.12em;

  /* ── Abstände ── */
  --space-2xs:      0.25rem;
  --space-xs:       0.5rem;
  --space-sm:       1rem;
  --space-md:       1.5rem;
  --space-lg:       2.5rem;
  --space-xl:       4rem;
  --space-2xl:      6rem;
  --space-section:  clamp(4rem, 9vw, 7rem);

  /* ── Radien ── */
  --radius-xs:      0.25rem;
  --radius-sm:      0.5rem;
  --radius-md:      0.75rem;
  --radius-lg:      1rem;
  --radius-xl:      1.5rem;
  --radius-full:    9999px;

  /* ── Schatten ── */
  --shadow-xs:      0 1px 2px rgba(10, 22, 40, 0.04);
  --shadow-sm:      0 2px 8px rgba(10, 22, 40, 0.06);
  --shadow-md:      0 6px 20px rgba(10, 22, 40, 0.08);
  --shadow-lg:      0 16px 40px rgba(10, 22, 40, 0.12);
  --shadow-xl:      0 24px 60px rgba(10, 22, 40, 0.16);
  --shadow-glow:    0 8px 28px var(--color-accent-glow);

  /* ── Übergänge ── */
  --transition-fast:   150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition:        300ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:   500ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Layout ── */
  --max-width:       1240px;
  --max-width-narrow: 880px;
  --max-width-wide:  1440px;
  --header-height:   76px;
  --gutter:          clamp(1.25rem, 4vw, 2rem);

  /* ── Z-Index ── */
  --z-base:        1;
  --z-sticky:      100;
  --z-overlay:     900;
  --z-modal:       1000;
  --z-toast:       1100;
}