/* ===================================================================
   VARIABLES.CSS – Globale Design-Variablen & Theme-Studio Kompatibilität
   Enthält: Farben, Typografie, Glaswerte, Easing, Hintergrund
   =================================================================== */

/* -------------------------------------------------
   Primary Theme Variables (vom Theme-Studio verwaltet)
   Diese Werte werden von theme-preview.css überschrieben.
   ------------------------------------------------- */
:root {

  /* 🎨 Farben */
  --primary-color: #137547;
  --accent-color: #E8FF3A;
  --text-color: #ffffff;

  /* 🧊 Glas-Effekte */
  --glass-blur: 20px;
  --header-opacity: 0.15;
  --footer-opacity: 0.15;

  /* 🖋 Typografie */
  --font-family: "Montserrat", sans-serif;
  --font-size: 16px;

  /* 🍔 Hamburger / Tennisball Menü */
  --hamburger-color: #E8FF3A;
  --hamburger-size: 34px;
  --bounce-speed: 1.8s;

  /* -------------------------------------------------
     🔄 MAPPING: Alte System-Variablen bleiben erhalten
     aber basieren jetzt auf den Theme-Vars.
     ------------------------------------------------- */

  /* Hauptfarben (bisheriges System) */
  --green: var(--primary-color);
  --green-dark: color-mix(in srgb, var(--primary-color) 80%, black);
  --yellow: var(--accent-color);

  /* Glas */
  --white-glass: rgba(255, 255, 255, 0.2);
  --blur: var(--glass-blur);

  /* Motion / Easing */
  --ease-spring: cubic-bezier(.22, .61, .36, 1);

  /* Typografie (alt → neu) */
  --font-main: var(--font-family);
}

/* -------------------------------------------------
   Basis-Globalstyles (nicht Reset)
   ------------------------------------------------- */
html, body {
  font-family: var(--font-main);
  font-size: var(--font-size);
  color: var(--text-color);

  /* Hintergrund mit Theme-Farben */
  background: linear-gradient(135deg, var(--green-dark), var(--green));
  background-attachment: fixed;

  overflow-x: hidden;
  width: 100%;
}

/* Fokus für Accessibility */
:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 3px;
  border-radius: 6px;
}