/* ═══════════════════════════════════════════
   DESIGN-SYSTEM — Michael Stengel
   Dunkel & Premium
   ═══════════════════════════════════════════ */

:root {
  /* ── Farben ── */
  --color-bg:             #0F0D0C;
  --color-bg-alt:         #171412;
  --color-bg-card:        #1F1B18;
  --color-surface:        #272220;

  --color-text:           #D4C8BA;
  --color-text-dim:       rgba(212, 200, 186, 0.6);
  --color-text-heading:   #FFECD1;

  --color-accent:         #FFECD1;
  --color-accent-hover:   #FFF5E6;
  --color-accent-light:   rgba(255, 236, 209, 0.1);
  --color-accent-glow:    rgba(255, 236, 209, 0.2);

  --color-accent-dark:    #220C10;

  --color-secondary:      #60695C;
  --color-secondary-light: rgba(96, 105, 92, 0.3);

  --color-gold:           #FFECD1;
  --color-gold-dim:       rgba(255, 236, 209, 0.15);

  --color-border:         rgba(255, 236, 209, 0.1);
  --color-border-bright:  rgba(255, 236, 209, 0.25);

  --color-success:        #34d399;
  --color-error:          #ef4444;
  --color-warning:        #f59e0b;

  /* ── Typografie ── */
  --font-heading:   'Montserrat', sans-serif;
  --font-body:      'Montserrat', sans-serif;

  --fs-hero:        clamp(2.5rem, 6vw, 4rem);
  --fs-h2:          clamp(1.5rem, 3vw, 2rem);
  --fs-h3:          clamp(1.2rem, 2vw, 1.5rem);
  --fs-body:        1rem;
  --fs-small:       0.875rem;
  --fs-tiny:        0.75rem;

  --fw-regular:     400;
  --fw-medium:      500;
  --fw-semibold:    600;
  --fw-bold:        700;

  /* ── Abstände ── */
  --space-xs:       0.5rem;
  --space-sm:       1rem;
  --space-md:       2rem;
  --space-lg:       4rem;
  --space-xl:       6rem;
  --space-section:  clamp(4rem, 10vw, 8rem);

  /* ── Radien ── */
  --radius-sm:      0.5rem;
  --radius-md:      0.75rem;
  --radius-lg:      1.25rem;
  --radius-full:    9999px;

  /* ── Schatten ── */
  --shadow-sm:      0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md:      0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-lg:      0 8px 32px rgba(0, 0, 0, 0.5);
  --shadow-glow:    0 4px 24px var(--color-accent-glow);

  /* ── Übergänge ── */
  --transition-fast:   0.15s ease;
  --transition:        0.3s ease;
  --transition-slow:   0.5s ease;

  /* ── Layout ── */
  --max-width:      1200px;
  --header-height:  72px;
}