/* ============================================
   KLICKPARK DESIGN TOKENS
   Codename: "Digital Lucid"
   Stand: Januar 2026

   Basiert auf: SETUP/03_SPECS/DESIGN_SYSTEM.md
   ============================================ */

:root {
  /* ============================================
     FARBEN - Primär
     ============================================ */
  --color-black: #0f172a; /* Deep Void Black - Headlines, Text, Footer */
  --color-blue: #056eff; /* Klickpark Blue - Primary CTAs, Links */
  --color-blue-dark: #0455cc; /* Blue Hover State */
  --color-teal: #14b8a6; /* Signal Teal - Secondary CTAs */
  --color-teal-dark: #0d9488; /* Teal Hover State */
  --color-white: #ffffff;

  /* ============================================
     FARBEN - Slate Neutralskala
     ============================================ */
  --color-slate-900: #0f172a; /* Primärtext */
  --color-slate-700: #334155; /* Sekundärtext */
  --color-slate-500: #64748b; /* Tertiärtext, Captions */
  --color-slate-300: #cbd5e1; /* Borders, Dividers */
  --color-slate-100: #f1f5f9; /* Hintergründe, Cards */

  /* ============================================
     FARBEN - Status
     ============================================ */
  --color-success: #22c55e;
  --color-warning: #f59e0b;
  --color-error: #ef4444;
  --color-info: #3b82f6;

  /* ============================================
     FARBEN - Akzent (Legacy Support)
     ============================================ */
  --color-coral: #e8584c;
  --color-gold: #f59e0b;

  /* ============================================
     TYPOGRAFIE
     Hausschrift: Campton
     ============================================ */
  --font-heading:
    "Campton", "Plus Jakarta Sans", "Inter", system-ui, sans-serif;
  --font-body: "Campton", "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", monospace;

  /* Font Weights (Campton) */
  --font-extralight: 200;
  --font-book: 400;
  --font-medium: 500;
  --font-bold: 700;
  --font-black: 900;

  /* ============================================
     SPACING - 8px Basis-System
     ============================================ */
  --space-xs: 4px; /* Inline-Abstände */
  --space-sm: 8px; /* Kleine Abstände */
  --space-md: 16px; /* Standard-Abstände */
  --space-lg: 24px; /* Größere Abstände */
  --space-xl: 32px; /* Section-Padding */
  --space-2xl: 48px; /* Große Sections */
  --space-3xl: 64px; /* Hero-Bereiche */
  --space-4xl: 96px; /* Große Trenner */

  /* ============================================
     RADIEN
     Button-Radius 25px = Markenzeichen!
     ============================================ */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px; /* Cards */
  --radius-2xl: 24px;
  --radius-button: 25px; /* WICHTIG: Markenzeichen */
  --radius-full: 9999px;

  /* ============================================
     SCHATTEN
     ============================================ */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);
  --shadow-blue: 0 4px 14px rgba(5, 110, 255, 0.25);

  /* ============================================
     TRANSITIONS
     ============================================ */
  --transition-fast: 0.15s ease;
  --transition-base: 0.2s ease;
  --transition-slow: 0.3s ease-out;
  --transition-snap: cubic-bezier(0.16, 1, 0.3, 1);

  /* ============================================
     Z-INDEX SKALA
     ============================================ */
  --z-base: 0;
  --z-dropdown: 10;
  --z-sticky: 20;
  --z-modal: 30;
  --z-tooltip: 40;
  --z-toast: 50;

  /* ============================================
     CONTAINER
     ============================================ */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  --container-2xl: 1400px;
}

/* ============================================
   LEGACY VARIABLE MAPPING
   Für Abwärtskompatibilität mit bestehendem CSS
   ============================================ */
:root {
  --kp-primary: var(--color-blue);
  --kp-dark: var(--color-black);
  --kp-white: var(--color-white);
  --kp-coral: var(--color-coral);
  --kp-teal: var(--color-teal);
  --kp-blue: var(--color-blue);
  --kp-gold: var(--color-gold);
  --kp-snap: var(--transition-snap);
}

/* ============================================
   TYPOGRAFIE - Schriftgrößen
   Desktop-First, Mobile-Override unten
   ============================================ */
:root {
  /* Headlines */
  --text-h1: 48px;
  --text-h2: 36px;
  --text-h3: 28px;
  --text-h4: 22px;
  --text-h5: 18px;

  /* Body */
  --text-lg: 18px;
  --text-base: 16px;
  --text-sm: 14px;
  --text-xs: 12px;

  /* Line Heights */
  --leading-tight: 1.2;
  --leading-snug: 1.3;
  --leading-normal: 1.4;
  --leading-relaxed: 1.6;
}

/* ============================================
   BUTTON BASE STYLES (Korrigiert: 20px Radius)
   ============================================ */
.btn {
  border-radius: var(--radius-button); /* 20px - Markenzeichen! */
}

/* ============================================
   FOCUS STYLES - Accessibility (WCAG 2.1 AA)
   ============================================ */
:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px var(--color-white),
    0 0 0 4px var(--color-blue);
}

/* ============================================
   UTILITY CLASSES - Colors
   ============================================ */
.text-black {
  color: var(--color-black);
}
.text-blue {
  color: var(--color-blue);
}
.text-teal {
  color: var(--color-teal);
}
.text-slate-700 {
  color: var(--color-slate-700);
}
.text-slate-500 {
  color: var(--color-slate-500);
}

.bg-black {
  background-color: var(--color-black);
}
.bg-blue {
  background-color: var(--color-blue);
}
.bg-teal {
  background-color: var(--color-teal);
}
.bg-slate-100 {
  background-color: var(--color-slate-100);
}
.bg-white {
  background-color: var(--color-white);
}

/* ============================================
   UTILITY CLASSES - Spacing
   ============================================ */
.p-xs {
  padding: var(--space-xs);
}
.p-sm {
  padding: var(--space-sm);
}
.p-md {
  padding: var(--space-md);
}
.p-lg {
  padding: var(--space-lg);
}
.p-xl {
  padding: var(--space-xl);
}
.p-2xl {
  padding: var(--space-2xl);
}
.p-3xl {
  padding: var(--space-3xl);
}

.gap-xs {
  gap: var(--space-xs);
}
.gap-sm {
  gap: var(--space-sm);
}
.gap-md {
  gap: var(--space-md);
}
.gap-lg {
  gap: var(--space-lg);
}
.gap-xl {
  gap: var(--space-xl);
}

/* ============================================
   UTILITY CLASSES - Shadows
   ============================================ */
.shadow-sm {
  box-shadow: var(--shadow-sm);
}
.shadow-md {
  box-shadow: var(--shadow-md);
}
.shadow-lg {
  box-shadow: var(--shadow-lg);
}
.shadow-xl {
  box-shadow: var(--shadow-xl);
}

/* ============================================
   UTILITY CLASSES - Border Radius
   ============================================ */
.rounded-sm {
  border-radius: var(--radius-sm);
}
.rounded-md {
  border-radius: var(--radius-md);
}
.rounded-lg {
  border-radius: var(--radius-lg);
}
.rounded-xl {
  border-radius: var(--radius-xl);
}
.rounded-2xl {
  border-radius: var(--radius-2xl);
}
.rounded-button {
  border-radius: var(--radius-button);
}

/* ============================================
   MOBILE TYPOGRAPHY OVERRIDES
   ============================================ */
@media (max-width: 768px) {
  :root {
    --text-h1: 32px;
    --text-h2: 26px;
    --text-h3: 22px;
  }
}