/* static/css/theme-tokens.css
   Theme Overrides (Default) – später pro User überschreibbar
*/
:root {
  /* ========== TYPO ==========
     Tailwind nutzt --font-sans / --font-mono bereits.
  */
  --font-sans: Arial, Helvetica, sans-serif;

  /* ========== BRAND COLORS ==========
     Tailwind Utilities wie bg-green-500 nutzen --color-green-500.
     Wenn du dein Brand-Grün willst: überschreibe genau diese Tokens.
  */
  --color-green-500: #77A146;
  --color-green-600: #5f8339;
  
  /* ========== PETROL (Brand Accent) ========== */
  --color-header-h1-500: #009FA6;  /* petrol leuchtend */
  --color-header-h1-600: #00858B;  /* petrol Hover */
  
  /* ========== PETROL (Button Accent) ========== */
  --color-header-button-500: #009FA6;  /* petrol leuchtend */
  --color-header-button-600: #00858B;  /* petrol Hover */
  --color-header-button-ring: #009FA633; /* 20% alpha */

  /* Optional: wenn du Hover/Buttons anpassen willst */
  /* --color-green-800: #3f5a26; */

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

  /* ========== BACKGROUND ==========
     body hat bg-gray-100 via class. bg-gray-100 nutzt --color-gray-100.
     Wenn du das globale App-Background ändern willst, ändere gray-100:
  */
  --color-gray-100: #f3f4f6;

  /* ========== APP-SPECIFIC (nicht Tailwind) ==========
     Für Dinge, die Tailwind nicht als Variable exposed (z.B. dein Card Shadow).
  */
  --pp-card-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
  --pp-card-padding-x: 20px;
  --pp-card-padding-y: 16px;
}