/* Wohlstandsmarketing — variables.css */

:root {
  /* ─── Farben ─── */
  --bg: #0A0A0A;
  --surface: #111111;
  --surface-2: #1A1A1A;

  --gold: #db6f16;
  --gold-light: #f08c3c;
  --gold-glow: rgba(219, 111, 22, 0.15);
  --gold-border: rgba(219, 111, 22, 0.2);

  --accent: #1663de;
  --accent-light: #4d8ef5;
  --accent-glow: rgba(22, 99, 222, 0.15);

  --text: #F5F5F5;
  --text-muted: #999999;

  --border: rgba(219, 111, 22, 0.2);
  --border-subtle: rgba(255, 255, 255, 0.06);

  /* ─── Typografie ─── */
  --font-heading: 'Playfair Display', Georgia, serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-md:   1.125rem;
  --text-lg:   1.25rem;
  --text-xl:   1.5rem;
  --text-2xl:  2rem;
  --text-3xl:  clamp(2rem, 4vw, 3rem);
  --text-hero: clamp(3rem, 6vw, 5rem);

  --leading-tight:  1.2;
  --leading-snug:   1.4;
  --leading-normal: 1.75;

  --tracking-wide:  0.05em;
  --tracking-wider: 0.1em;
  --tracking-caps:  0.15em;

  /* ─── Spacing ─── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* ─── Layout ─── */
  --container-max: 1200px;
  --section-padding-y: 6rem;
  --section-padding-x: 2rem;

  /* ─── Border Radius ─── */
  --radius-sm: 4px;
  --radius:    8px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* ─── Transitions ─── */
  --transition:      0.3s ease;
  --transition-fast: 0.15s ease;
  --transition-slow: 0.6s ease;

  /* ─── Shadows ─── */
  --shadow-gold: 0 0 30px rgba(219, 111, 22, 0.15);
  --shadow-gold-sm: 0 0 15px rgba(219, 111, 22, 0.1);
  --shadow-dark: 0 4px 24px rgba(0, 0, 0, 0.4);

  /* ─── Z-Index ─── */
  --z-base:    0;
  --z-above:   10;
  --z-nav:     100;
  --z-overlay: 200;
  --z-modal:   300;
  --z-top:     400;
}