/* ============================================================
   JOLIE WEBDESIGN — Design Tokens
   ============================================================ */

:root {
  /* ── Farben ────────────────────────────────────────────── */
  --c-black:        #070710;
  --c-dark:         #0F0F1A;
  --c-dark-2:       #16162A;
  --c-dark-3:       #1E1E32;

  --c-accent:       #FF4B2B;
  --c-accent-rgb:   255, 75, 43;
  --c-accent-hover: #E63E20;
  --c-accent-2:     #4F46E5;
  --c-accent-2-rgb: 79, 70, 229;

  --c-white:        #FFFFFF;
  --c-light:        #F5F5FA;
  --c-light-2:      #EBEBF5;

  --c-text:         #1A1A2E;
  --c-text-light:   #FAFAFF;
  --c-text-muted:   #6B7280;
  --c-text-subtle:  #9CA3AF;

  --c-border:       rgba(0, 0, 0, 0.08);
  --c-border-dark:  rgba(255, 255, 255, 0.08);

  /* ── Typografie ────────────────────────────────────────── */
  --font:           'Inter', -apple-system, BlinkMacSystemFont,
                    'Segoe UI', Helvetica, Arial, sans-serif;
  --font-display:   'Space Grotesk', -apple-system, BlinkMacSystemFont,
                    'Segoe UI', Helvetica, Arial, sans-serif;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  3rem;
  --text-6xl:  3.75rem;
  --text-7xl:  4.5rem;
  --text-8xl:  6rem;

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semi:    600;
  --weight-bold:    700;
  --weight-black:   700;

  --leading-tight:  1.1;
  --leading-snug:   1.3;
  --leading-normal: 1.6;
  --leading-loose:  1.8;

  /* ── Abstände ──────────────────────────────────────────── */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;
  --sp-32: 8rem;
  --sp-40: 10rem;

  /* ── Layout ────────────────────────────────────────────── */
  --max-w:        1200px;
  --max-w-narrow: 800px;
  --nav-h:        72px;

  /* ── Ecken ─────────────────────────────────────────────── */
  --r-sm:   6px;
  --r-md:   12px;
  --r-lg:   20px;
  --r-xl:   32px;
  --r-full: 9999px;

  /* ── Schatten ──────────────────────────────────────────── */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.10), 0 2px 6px rgba(0,0,0,0.08);
  --shadow-lg:  0 12px 40px rgba(0,0,0,0.14), 0 4px 12px rgba(0,0,0,0.10);
  --shadow-xl:  0 24px 60px rgba(0,0,0,0.20);
  --glow-accent: 0 0 40px rgba(var(--c-accent-rgb), 0.25);
  --glow-blue:   0 0 40px rgba(var(--c-accent-2-rgb), 0.25);

  /* ── Transitionen ──────────────────────────────────────── */
  --t-fast:   0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --t-base:   0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --t-slow:   0.4s  cubic-bezier(0.4, 0, 0.2, 1);
  --t-spring: 0.5s  cubic-bezier(0.34, 1.56, 0.64, 1);
}