/* VersammlungsHub – CSS-Variablen (IMMER einbinden, nie Hex hardcoden) */

:root {
  /* === Primärpalette === */
  --color-primary:       #4f6ef7;
  --color-primary-dark:  #3a56d4;
  --color-primary-light: #e8ecff;
  --color-primary-muted: #a5b4fc;

  /* === Semantisch === */
  --color-success:       #10b981;
  --color-success-light: #d1fae5;
  --color-warning:       #f59e0b;
  --color-warning-light: #fef3c7;
  --color-error:         #ef4444;
  --color-error-light:   #fee2e2;
  --color-info:          #3b82f6;
  --color-info-light:    #dbeafe;

  /* === Neutrals === */
  --color-dark:         #1a1a2e;
  --color-text:         #374151;
  --color-text-muted:   #6b7280;
  --color-text-subtle:  #9ca3af;
  --color-border:       #e5e7eb;
  --color-bg:           #ffffff;
  --color-bg-alt:       #f8f9ff;

  /* === Typografie === */
  --font-display: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', monospace;

  --font-light:    300;
  --font-regular:  400;
  --font-medium:   500;
  --font-semibold: 600;
  --font-bold:     700;

  /* === Grössen-Scale === */
  --text-7xl:  4.5rem;   /* 72px – Hero Landing */
  --text-5xl:  3rem;     /* 48px – Section-Headlines */
  --text-4xl:  2.25rem;  /* 36px – Page-Titles */
  --text-3xl:  1.875rem; /* 30px – Card-Headlines */
  --text-2xl:  1.5rem;   /* 24px – Sub-Headlines */
  --text-xl:   1.25rem;  /* 20px – Lead-Text */
  --text-base: 1rem;     /* 16px – Body */
  --text-sm:   0.875rem; /* 14px – Labels */
  --text-xs:   0.75rem;  /* 12px – Badges */

  /* === Spacing === */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* === Radien === */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* === Shadows === */
  --shadow-sm:      0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-md:      0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg:      0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-primary: 0 4px 14px 0 rgb(79 110 247 / 0.3);
}

/* === Dark Mode === */
@media (prefers-color-scheme: dark) {
  :root {
    --color-text:        #e5e7eb;
    --color-text-muted:  #9ca3af;
    --color-text-subtle: #6b7280;
    --color-border:      #374151;
    --color-bg:          #111827;
    --color-bg-alt:      #1f2937;
    /* --color-dark bleibt unverändert – strukturelle Fläche */
  }
}

/* Explizites Light-Theme (data-theme="light" verhindert System-Dark-Mode) */
[data-theme="light"] {
  --color-text:        #374151;
  --color-text-muted:  #6b7280;
  --color-text-subtle: #9ca3af;
  --color-border:      #e5e7eb;
  --color-bg:          #ffffff;
  --color-bg-alt:      #f8f9ff;
}

[x-cloak] { display: none !important; }