/* EazyReelz Design-Tokens — Single Source of Truth für Farben, Typo, Abstände.
   Markenfarben aus dem Logo: Violett → Pink → Orange. */

:root {
  /* ── Marke ─────────────────────────────────────────────── */
  --brand-violet: #7c3aed;
  --brand-pink:   #ec4899;
  --brand-orange: #f97316;

  --grad:       linear-gradient(135deg, var(--brand-violet) 0%, var(--brand-pink) 55%, var(--brand-orange) 100%);
  --grad-hover: linear-gradient(135deg, #6d28d9 0%, #db2777 55%, #ea580c 100%);
  --grad-soft:  linear-gradient(135deg, rgba(124,58,237,0.1) 0%, rgba(236,72,153,0.1) 55%, rgba(249,115,22,0.1) 100%);

  /* ── Flächen ───────────────────────────────────────────── */
  --bg:        #f4f1ff;
  --surface:   #ffffff;
  --surface-2: #ede9ff;
  --surface-3: #e0d9fb;

  --border:   rgba(124,58,237,0.10);
  --border-2: rgba(124,58,237,0.18);
  --border-3: rgba(124,58,237,0.30);

  /* ── Text ──────────────────────────────────────────────── */
  --text:   #1a1028;
  --text-2: #6b5e8a;
  --text-3: #b0a5cc;

  --accent:      var(--brand-violet);
  --accent-glow: rgba(124,58,237,0.18);

  /* ── Semantik ──────────────────────────────────────────── */
  --green:  #059669;
  --yellow: #d97706;
  --red:    #dc2626;
  --orange: #ea580c;
  --blue:   #2563eb;

  --green-bg:  rgba(5,150,105,0.10);
  --yellow-bg: rgba(217,119,6,0.10);
  --red-bg:    rgba(220,38,38,0.10);
  --orange-bg: rgba(234,88,12,0.10);
  --blue-bg:   rgba(37,99,235,0.10);

  /* ── Schatten ──────────────────────────────────────────── */
  --shadow-sm: 0 1px 3px rgba(124,58,237,0.06);
  --shadow:    0 2px 12px rgba(124,58,237,0.07);
  --shadow-lg: 0 8px 32px rgba(124,58,237,0.14);
  --shadow-glow: 0 2px 14px rgba(124,58,237,0.28);

  /* ── Typografie ────────────────────────────────────────── */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, monospace;

  --text-xs:  0.72rem;
  --text-sm:  0.8rem;
  --text-md:  0.875rem;
  --text-lg:  1rem;
  --text-xl:  1.25rem;
  --text-2xl: clamp(1.3rem, 1.1rem + 1vw, 1.6rem);
  --text-3xl: clamp(1.7rem, 1.3rem + 2vw, 2.4rem);

  /* ── Abstände ──────────────────────────────────────────── */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;

  /* ── Radien ────────────────────────────────────────────── */
  --r-sm: 8px;
  --r:    12px;
  --r-lg: 16px;
  --r-full: 999px;

  /* ── Bewegung ──────────────────────────────────────────── */
  --dur-fast:   140ms;
  --dur:        220ms;
  --dur-slow:   380ms;
  --ease:       cubic-bezier(0.16, 1, 0.3, 1);

  /* ── Layout ────────────────────────────────────────────── */
  --topbar-h:   60px;
  --bottomnav-h: 62px;
  --maxw:       1100px;
}

/* Reduzierte Bewegung respektieren — Barrierefreiheit. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}