/* ============================================================
   andi24 — Design Token System
   Single source of truth für alles, was nicht über Tailwind
   läuft (direkte CSS-Regeln, Hover-States, manuelle Größen).
   ============================================================ */

:root {

  /* ============ FARBEN ============ */
  --color-primary:      #6ab2cf;
  --color-primary-dark: #4a9dbf;
  --color-primary-hover:#5a9fb8;
  --color-primary-bg:   #f0f9fc;
  --color-primary-10:   rgba(106,178,207,0.10);
  --color-primary-18:   rgba(106,178,207,0.18);

  --color-dark:         #1a1a1a;
  --color-text:         #555555;
  --color-text-muted:   #888888;
  --color-border:       rgba(26,26,26,0.10);
  --color-white:        #ffffff;
  --color-bg-light:     #f8fafc;

  --color-success:      #22c55e;
  --color-warning:      #f59e0b;
  --color-error:        #ef4444;

  /* ============ TYPOGRAFIE ============ */
  --font-family:        -apple-system, BlinkMacSystemFont,
                        'Segoe UI', Roboto, sans-serif;

  --font-size-xs:       0.75rem;
  --font-size-sm:       0.875rem;
  --font-size-base:     1.0625rem;
  --font-size-md:       1.125rem;
  --font-size-lg:       1.25rem;
  --font-size-xl:       1.5rem;
  --font-size-2xl:      1.875rem;
  --font-size-3xl:      2.25rem;
  --font-size-display:  clamp(2rem, 5vw, 3.5rem);

  --font-weight-normal:   400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  --line-height-tight:    1.08;
  --line-height-normal:   1.55;
  --line-height-relaxed:  1.8;

  /* ============ ABSTÄNDE ============ */
  --space-xs:   0.25rem;
  --space-sm:   0.5rem;
  --space-md:   1rem;
  --space-lg:   1.5rem;
  --space-xl:   2rem;
  --space-2xl:  3rem;
  --space-3xl:  4rem;
  --space-4xl:  5rem;
  --space-section: clamp(4rem, 8vw, 7rem);

  /* ============ BORDER RADIUS ============ */
  --radius-sm:   0.375rem;
  --radius-md:   0.5rem;
  --radius-lg:   0.75rem;
  --radius-xl:   1rem;
  --radius-2xl:  1.5rem;
  --radius-full: 9999px;

  /* ============ SHADOWS ============ */
  --shadow-card:  0 1px 2px rgba(16,24,40,0.04),
                  0 4px 16px rgba(16,24,40,0.06);
  --shadow-hover: 0 8px 32px rgba(106,178,207,0.18),
                  0 2px 4px rgba(16,24,40,0.04);
  --shadow-cta:   0 10px 24px -8px rgba(74,157,191,0.5);

  /* ============ LOGO ============ */
  --logo-height-nav:    80px;
  --logo-height-footer: 60px;

  /* ============ NAV ============ */
  --nav-height-mobile:  64px;
  --nav-height-desktop: 72px;

  /* ============ TRANSITIONS ============ */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease;

  /* ============ ACCENT (Hero-Underline) ============ */
  --accent-uline: 0.40;
  --accent-bg:    0.08;
  --accent-ring:  0.15;
}

/* ============================================================
   UTILITY CLASSES
   Direkte CSS-Klassen, die Tokens verwenden.
   ============================================================ */

/* Site-Logo */
.site-logo-nav {
  height: var(--logo-height-nav);
  width: auto;
  display: block;
}

.site-logo-footer {
  height: var(--logo-height-footer);
  width: auto;
  display: block;
}

/* Dot-Grid Background */
.bg-dot-grid {
  background-image: radial-gradient(
    circle at 1px 1px,
    rgba(106,178,207,0.18) 1px,
    transparent 0
  );
  background-size: 22px 22px;
}

/* Hero Accent Underline */
.accent-underline {
  background-image: linear-gradient(
    transparent 78%,
    rgba(106,178,207,var(--accent-uline)) 78%
  );
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding: 0 0.05em;
}

/* ============================================================
   DENSITY MODIFIERS
   Override der Tailwind-`.section` Padding via data-density.
   ============================================================ */
html[data-density="compact"] .section {
  padding-top:    clamp(3rem, 6vw, 5rem);
  padding-bottom: clamp(3rem, 6vw, 5rem);
}
html[data-density="comfy"] .section {
  padding-top:    clamp(5rem, 10vw, 9rem);
  padding-bottom: clamp(5rem, 10vw, 9rem);
}

/* ============ HONEYPOT ============ */
/* off-screen statt display:none — Bots erkennen display:none */
.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}