/* ================================================================
   LEADNETIC · Design Tokens
   Einzige Quelle für Farben, Abstände, Radien und Schatten.
   Wird von jeder Seite als erstes Stylesheet nach fonts.css geladen.
   ================================================================ */
:root {
  /* ── Farben ── */
  --blue:        #0057FF;
  --blue-dark:   #0045CC;
  --blue-soft:   #2B7BFF;   /* hellster Blauton, der auf Weiß noch 4,5:1 hat */
  --blue-light:  rgba(0,87,255,0.07);
  --blue-tint:   #F4F7FF;
  --cyan:        #38BDF8;
  --cyan-dark:   #0EA5E9;
  --sky:         #93C5FD;

  --dark:        #0B0F1A;
  --dark-card:   #141929;
  --dark-border: rgba(255,255,255,0.08);
  --navy:        #111827;

  --gray-700:    #374151;
  --gray-600:    #4B5563;
  --gray-500:    #6B7280;
  --gray-400:    #9CA3AF;
  --gray-200:    #E5E7EB;
  --gray-100:    #F3F4F6;
  --gray-50:     #F8FAFC;
  --white:       #FFFFFF;

  --green:       #10B981;
  --green-dark:  #059669;
  --amber:       #F59E0B;
  --amber-dark:  #D97706;
  --red:         #EF4444;

  /* ── Rahmen ── */
  --line:        rgba(11,15,26,0.08);
  --line-soft:   rgba(11,15,26,0.05);

  /* ── Verläufe ── */
  --grad-primary:  linear-gradient(135deg, #0057FF 0%, #2B7BFF 100%);
  --grad-accent:   linear-gradient(135deg, #38BDF8 0%, #0057FF 100%);
  --grad-dark:     linear-gradient(160deg, #0B0F1A 0%, #141929 100%);
  --grad-text:     linear-gradient(120deg, #0044CC 0%, #0057FF 55%, #2B7BFF 100%);
  --grad-recruit:  linear-gradient(135deg, #0057FF 0%, #0EA5E9 100%);
  --grad-acquire:  linear-gradient(135deg, #10B981 0%, #0057FF 100%);

  /* Weicher Lichtschein hinter Hero-Bereichen */
  --glow-light: radial-gradient(ellipse 70% 55% at 50% 0%, rgba(0,87,255,.09) 0%, transparent 70%);
  --glow-dark:  radial-gradient(ellipse 75% 60% at 20% 10%, rgba(0,87,255,.18) 0%, transparent 65%),
                radial-gradient(ellipse 65% 55% at 85% 90%, rgba(56,189,248,.11) 0%, transparent 65%);

  /* ── Radien ── */
  --r-xs:   6px;
  --r-sm:  10px;
  --r-md:  14px;
  --r-lg:  20px;
  --r-xl:  28px;
  --r-2xl: 36px;
  --r-full: 9999px;

  /* ── Schatten: flacher und weicher als vorher ── */
  --sh-xs:  0 1px 2px  rgba(11,15,26,0.04);
  --sh-sm:  0 2px 8px  rgba(11,15,26,0.05);
  --sh-md:  0 6px 24px rgba(11,15,26,0.06);
  --sh-lg:  0 16px 48px rgba(11,15,26,0.09);
  --sh-xl:  0 28px 72px rgba(11,15,26,0.12);
  --sh-blue: 0 10px 32px rgba(0,87,255,0.20);

  /* ── Bewegung ── */
  --ease:        cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --ease-out:    cubic-bezier(0.0, 0.0, 0.2, 1);

  /* ── Layout ── */
  --max-w:   1240px;
  --max-txt: 720px;       /* Lesebreite für Fließtext */
  --sp:      7.5rem 0;    /* Standard-Abstand einer Sektion */
  --sp-sm:   5rem 0;
  --gutter:  2rem;
}

@media (max-width: 900px) {
  :root {
    --sp:     4.5rem 0;
    --sp-sm:  3.25rem 0;
    --gutter: 1.25rem;
  }
}