/* builder-template/css/variables.css */
/* CSS Custom Properties für dynamisches Brand-Theming */
/* Lokale, hochqualitative Systemschriftarten zur 100%igen DSGVO-Konformität */

:root {
  /* HSL-Basiswerte (werden per JS dynamisch überschrieben) */
  --primary-h: 28;
  --primary-s: 60%;
  --primary-l: 45%;

  /* Dynamische Brand-Farben */
  --primary: hsl(var(--primary-h), var(--primary-s), var(--primary-l));
  --primary-hover: hsl(var(--primary-h), var(--primary-s), calc(var(--primary-l) - 8%));
  --primary-light: hsl(var(--primary-h), var(--primary-s), calc(var(--primary-l) + 40%));
  --primary-glow: hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.15);
  
  /* Harmonischer Kontrastfarbton (Secondary) */
  --secondary-h: calc(var(--primary-h) + 120);
  --secondary-s: var(--primary-s);
  --secondary-l: var(--primary-l);

  /* Dynamische Brand-Farben (Secondary) */
  --secondary: hsl(var(--secondary-h), var(--secondary-s), var(--secondary-l));
  --secondary-hover: hsl(var(--secondary-h), var(--secondary-s), calc(var(--secondary-l) - 8%));
  --secondary-light: hsl(var(--secondary-h), var(--secondary-s), calc(var(--secondary-l) + 30%));
  --secondary-glow: hsla(var(--secondary-h), var(--secondary-s), var(--secondary-l), 0.15);

  /* Neutrale Farbpalette (Modern Dark/Deep Slate Mode) */
  --bg-dark: #090c15;
  --bg-dark-rgb: 9, 12, 21;
  --bg-surface: #0e1220;
  --bg-card: rgba(255, 255, 255, 0.02);
  --border-card: rgba(255, 255, 255, 0.06);
  --border-hover: rgba(255, 255, 255, 0.12);
  
  /* Textfarben */
  --text-primary: #f8fafc;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;
  
  /* Glassmorphism */
  --glass-bg: rgba(9, 12, 21, 0.75);
  --glass-border: rgba(255, 255, 255, 0.05);
  --glass-blur: blur(20px);

  /* Typografie (100% DSGVO-konforme System-Schriftarten) */
  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-serif: Georgia, Cambria, "Times New Roman", Times, serif;
  
  --font-heading: var(--font-sans);
  --font-body: var(--font-sans);

  /* Eckenrundungen */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-full: 9999px;

  /* Übergänge & Schatten */
  --transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 8px 30px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.4);
}