/* ═══════════════════════════════════════════
   DESIGN-SYSTEM — Sicilia Profonda
   Generiert am 20.02.2026
   ═══════════════════════════════════════════ */

:root {
  /* ── Farben ── */
  --color-bg:             #f7fff7;
  --color-bg-alt:         #f3efe3;
  --color-bg-card:        #ffffff;
  --color-surface:        #ffffff;

  --color-text:           #343434;
  --color-text-dim:       #6b7280;
  --color-text-heading:   #2f3061;

  --color-accent:         #2563EB;
  --color-accent-hover:   #1D4ED8;
  --color-accent-light:   rgba(37, 99, 235, 0.12);
  --color-accent-glow:    rgba(37, 99, 235, 0.25);

  --color-navy:           #2f3061;
  --color-navy-dark:      #252850;
  --color-navy-light:     rgba(47, 48, 97, 0.08);

  --color-border:         rgba(47, 48, 97, 0.10);
  --color-border-bright:  rgba(47, 48, 97, 0.20);

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

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

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

  /* ── Abstaende ── */
  --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(47, 48, 97, 0.06);
  --shadow-md:      0 4px 16px rgba(47, 48, 97, 0.08);
  --shadow-lg:      0 8px 32px rgba(47, 48, 97, 0.12);
  --shadow-glow:    0 4px 24px var(--color-accent-glow);

  /* ── Uebergaenge ── */
  --transition-fast:   0.15s ease;
  --transition:        0.3s ease;
  --transition-slow:   0.5s ease;

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

  /* ── Z-Index System ── */
  --z-base:          1;
  --z-header:        100;
  --z-mobile-nav:    200;
  --z-modal:         300;
  --z-cookie-banner: 9999;

  /* ── Button-Textfarbe (Blau ist dunkel → weißer Text) ── */
  --btn-text-on-accent: #ffffff;
}