/* ═══════════════════════════════════════════════════
   variables.css — Design-System
   ManokiSolution — Strategic Smarketing Consulting
   ═══════════════════════════════════════════════════ */

:root {
  /* ── Markenfarben ── */
  --color-green:        #1F3A33;
  --color-green-dark:   #162B25;
  --color-green-deeper: #0F1E1A;
  --color-gold:         #C9A86A;
  --color-gold-light:   rgba(201,168,106,.18);
  --color-gold-border:  rgba(201,168,106,.22);
  --color-grey:         #1A1A1A;       /* dunkler für bessere Lesbarkeit */
  --color-cream:        #F5F2EC;
  --color-light:        #FAFAF8;
  --color-muted:        #5A5A4A;       /* eine Nuance dunkler auf hellem Hintergrund */
  --color-muted-dark:   rgba(245,242,236,.72); /* eine Nuance heller auf grünem Hintergrund */
  --color-border:       rgba(201,168,106,.2);

  /* ── Semantisch ── */
  --color-success:      #34d399;
  --color-error:        #ef4444;

  /* ── Typografie ── */
  --font-heading: 'Playfair Display', Georgia, serif;
  --font-body:    'DM Sans', system-ui, sans-serif;
  --font-mono:    'DM Mono', monospace;

  /* ── Schriftgrößen ── */
  --fs-hero:   clamp(2.6rem, 5.5vw, 4.4rem);
  --fs-h2:     clamp(2rem, 4vw, 3rem);
  --fs-h3:     clamp(1.4rem, 2.5vw, 1.8rem);
  --fs-body:   1rem;
  --fs-small:  0.875rem;
  --fs-tiny:   0.78rem;
  --fs-mono:   0.72rem;

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

  /* ── Radien ── */
  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-full: 9999px;

  /* ── Schatten ── */
  --shadow-sm:  0 4px 16px rgba(31,58,51,.06);
  --shadow-md:  0 12px 40px rgba(31,58,51,.10);
  --shadow-lg:  0 24px 64px rgba(31,58,51,.14);

  /* ── Übergänge ── */
  --ease: .3s ease;
  --ease-slow: .6s ease;

  /* ── Layout ── */
  --max-width:     1160px;
  --nav-height:    68px;

  /* ── Z-Index ── */
  --z-nav:        100;
  --z-mobile-nav: 200;
  --z-cookie:     9999;
}