/* ============================================================
   VersammlungsHub – Brand CSS Variables
   Einbinden in app/static/css/main.css UND
   app/static/landing/css/landing.css
   ============================================================ */

:root {
  /* ── Primärfarben ── */
  --color-primary:        #4f6ef7;   /* Haupt-Akzent Blau */
  --color-primary-dark:   #3a56d4;   /* Hover-State */
  --color-primary-light:  #e8ecff;   /* Hintergründe, Badges */
  --color-primary-muted:  #a5b4fc;   /* Deaktiviert, Subtext */

  /* ── Neutrals ── */
  --color-dark:           #1a1a2e;   /* Headlines, primärer Text */
  --color-text:           #374151;   /* Body Text */
  --color-text-muted:     #6b7280;   /* Sekundärer Text, Labels */
  --color-text-subtle:    #9ca3af;   /* Placeholder, Hints */
  --color-border:         #e5e7eb;   /* Trennlinien, Borders */
  --color-border-light:   #f3f4f6;   /* Subtile Borders */

  /* ── Backgrounds ── */
  --color-bg:             #ffffff;   /* Primärer Hintergrund */
  --color-bg-alt:         #f8f9ff;   /* Sektions-Hintergrund */
  --color-bg-subtle:      #f3f4f6;   /* Cards, Inputs */

  /* ── Semantisch ── */
  --color-success:        #10b981;   /* Erfolg, Anwesend */
  --color-success-light:  #d1fae5;
  --color-warning:        #f59e0b;   /* Warnung, Ausstehend */
  --color-warning-light:  #fef3c7;
  --color-error:          #ef4444;   /* Fehler, Abwesend */
  --color-error-light:    #fee2e2;
  --color-info:           #3b82f6;   /* Info */
  --color-info-light:     #dbeafe;

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

  /* Grössen-Scale */
  --text-xs:    0.75rem;    /* 12px */
  --text-sm:    0.875rem;   /* 14px */
  --text-base:  1rem;       /* 16px */
  --text-lg:    1.125rem;   /* 18px */
  --text-xl:    1.25rem;    /* 20px */
  --text-2xl:   1.5rem;     /* 24px */
  --text-3xl:   1.875rem;   /* 30px */
  --text-4xl:   2.25rem;    /* 36px */
  --text-5xl:   3rem;       /* 48px */
  --text-6xl:   3.75rem;    /* 60px */
  --text-7xl:   4.5rem;     /* 72px – Hero */

  /* Gewichte */
  --font-normal:    400;
  --font-medium:    500;
  --font-semibold:  600;
  --font-bold:      700;
  --font-extrabold: 800;

  /* Zeilenabstand */
  --leading-tight:  1.25;
  --leading-snug:   1.375;
  --leading-normal: 1.5;
  --leading-relaxed:1.625;
  --leading-loose:  1.8;

  /* ── Abstände ── */
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-6:   1.5rem;
  --space-8:   2rem;
  --space-12:  3rem;
  --space-16:  4rem;
  --space-20:  5rem;
  --space-24:  6rem;
  --space-32:  8rem;

  /* ── Border Radius ── */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  /* ── Schatten ── */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.07), 0 2px 6px rgba(0,0,0,0.04);
  --shadow-lg:  0 8px 32px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.04);
  --shadow-xl:  0 20px 60px rgba(0,0,0,0.10), 0 8px 24px rgba(0,0,0,0.05);

  /* Primary farbiger Schatten (für CTA Buttons) */
  --shadow-primary: 0 8px 24px rgba(79, 110, 247, 0.35);

  /* ── Transitions ── */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;

  /* ── Layout ── */
  --container-max:  1200px;
  --container-pad:  clamp(1rem, 5vw, 3rem);
  --section-pad:    clamp(4rem, 10vw, 8rem);
}

/* ── Dark Mode ── */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg:         #0f0f1a;
    --color-bg-alt:     #1a1a2e;
    --color-bg-subtle:  #252540;
    --color-text:       #e5e7eb;
    --color-text-muted: #9ca3af;
    --color-border:     #2d2d4e;
    /* --color-dark bleibt immer #1a1a2e – wird für dunkle Hintergründe (Footer, Cards) genutzt */
  }
}