/* ============================================================
   erle-it · Design-Tokens (v1.0)
   Single source of truth für Typo, Farben, Spacing, Motion.
   ============================================================ */

:root {
  /* Farben – Basis */
  --color-navy:       #0f172a;
  --color-navy-2:     #1e293b;
  --color-navy-3:     #334155;
  --color-accent:     #2563eb;
  --color-accent-2:   #1d4ed8;
  --color-accent-50:  #eff6ff;
  --color-text:       #374151;
  --color-text-heading: #0f172a;
  --color-muted:      #64748b;
  --color-muted-2:    #94a3b8;
  --color-bg:         #ffffff;
  --color-bg-soft:    #f8fafc;
  --color-bg-softer:  #f1f5f9;
  --color-border:     #e2e8f0;
  --color-border-strong: #cbd5e1;

  /* Farben – KI-Seite (violetter Akzent, sparsam eingesetzt) */
  --color-ai-accent:  #7c3aed;
  --color-ai-accent-2:#6d28d9;
  --color-ai-soft:    #f5f3ff;
  --ai-gradient:      linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
  --ai-gradient-soft: linear-gradient(135deg, rgba(37,99,235,0.08) 0%, rgba(124,58,237,0.08) 100%);

  /* Typografie */
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --fs-xs:   0.8125rem;  /* 13 */
  --fs-sm:   0.9375rem;  /* 15 */
  --fs-base: 1rem;       /* 16 */
  --fs-lg:   1.125rem;   /* 18 */
  --fs-xl:   clamp(1.25rem, 1.1vw + 1rem, 1.5rem);
  --fs-2xl:  clamp(1.5rem,  1.5vw + 1rem, 2rem);
  --fs-3xl:  clamp(1.875rem, 2vw + 1rem, 2.5rem);
  --fs-4xl:  clamp(2.25rem, 2.8vw + 1rem, 3rem);
  --fs-hero: clamp(2.25rem, 3.5vw + 1rem, 4rem);

  --lh-tight: 1.15;
  --lh-snug:  1.25;
  --lh-base:  1.6;
  --lh-loose: 1.75;

  --tracking-tight:  -0.02em;
  --tracking-snug:   -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.02em;
  --tracking-ultra:  0.16em;

  /* Spacing (4px base) */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;
  --space-11: 160px;

  /* Layout */
  --container: 1180px;
  --container-narrow: 820px;
  --container-wide: 1320px;

  /* Radius */
  --r-sm: 6px;
  --r:    10px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-full: 9999px;

  /* Schatten */
  --shadow-1: 0 1px 2px rgba(15,23,42,0.04);
  --shadow-2: 0 4px 12px rgba(15,23,42,0.06);
  --shadow-3: 0 12px 32px -8px rgba(15,23,42,0.12);
  --shadow-4: 0 24px 64px -16px rgba(15,23,42,0.18);
  --shadow-glow: 0 0 0 1px rgba(37,99,235,0.15), 0 8px 24px -4px rgba(37,99,235,0.25);

  /* Motion */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 180ms;
  --dur:      320ms;
  --dur-slow: 640ms;

  /* Z-Index */
  --z-sticky: 100;
  --z-nav:    200;
  --z-modal:  400;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0.01ms;
    --dur:      0.01ms;
    --dur-slow: 0.01ms;
  }
}