/* Theme-Tokens: überschreiben die Tailwind-Variablen für Schrift, Farben,
   Radien und Hintergrund der App. */
:root {
  /* --- Schrift ---
     Tailwind nutzt --font-sans / --font-mono. */
  --font-sans: Arial, Helvetica, sans-serif;

  /* --- Markenfarben ---
     Tailwind-Utilities wie bg-green-500 nutzen --color-green-500; eine
     eigene Markenfarbe überschreibt genau diese Tokens. */
  --color-green-500: #77A146;
  --color-green-600: #5f8339;
  
  /* --- Petrol (Akzent Überschrift) --- */
  --color-header-h1-500: #009FA6;  /* petrol leuchtend */
  --color-header-h1-600: #00858B;  /* petrol Hover */
  
  /* --- Petrol (Akzent Button) --- */
  --color-header-button-500: #009FA6;  /* petrol leuchtend */
  --color-header-button-600: #00858B;  /* petrol Hover */
  --color-header-button-ring: #009FA633; /* 20% alpha */


  /* --- Radien ---
     Tailwind nutzt --radius-md/--radius-lg für rounded-md/lg. */
  --radius-md: 0.5rem; /* ~8px */
  --radius-lg: 0.5rem;

  /* --- Hintergrund ---
     body trägt bg-gray-100 als Klasse, und das nutzt --color-gray-100. */
  --color-gray-100: #f3f4f6;

  /* --- App-eigene Werte (nicht aus Tailwind) --- */
  --pp-card-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
  --pp-card-padding-x: 20px;
  --pp-card-padding-y: 16px;
}