/* =============================================================================
   DESIGN-TOKENS
   -----------------------------------------------------------------------------
   Dies ist die zentrale Stellschraube für das gesamte Erscheinungsbild.
   Farben, Schriften, Abstände, Rundungen und Schatten sind hier als
   CSS-Variablen definiert. app.css benutzt AUSSCHLIESSLICH diese Variablen.

   => Für ein neues Design mit ChatGPT genügt es in den allermeisten Fällen,
      die Werte hier anzupassen. Struktur und Funktion bleiben unberührt.

   Hinweis DSGVO: Schriften bitte selbst hosten (keine Google-Fonts-CDN),
   sonst werden Besucher-IPs an Dritte übertragen. Ein @font-face-Beispiel
   steht am Ende dieser Datei.
   ========================================================================== */

:root {
    /* --- Farbpalette ---------------------------------------------------- */
    --color-bg:            #f4f6f9;   /* Seitenhintergrund */
    --color-surface:       #ffffff;   /* Karten, Panels */
    --color-surface-alt:   #f8fafc;   /* leicht abgesetzte Flächen */
    --color-border:        #e2e8f0;
    --color-text:          #1f2933;
    --color-text-muted:    #6b7280;
    --color-heading:       #111827;

    /* Markenfarbe (Primär) – hier setzt ihr eure Vereinsfarbe */
    --color-primary:       #2563eb;
    --color-primary-hover: #1d4ed8;
    --color-primary-text:  #ffffff;

    /* Statusfarben */
    --color-success-bg:  #e7f6ec;  --color-success-fg:  #1a7f37;
    --color-error-bg:    #fdecec;  --color-error-fg:    #b42318;
    --color-info-bg:     #e8f0fe;  --color-info-fg:     #1d4ed8;
    --color-warning-bg:  #fef7e6;  --color-warning-fg:  #b25e09;

    /* Sidebar (dunkel) */
    --color-sidebar-bg:      #111827;
    --color-sidebar-text:    #cbd5e1;
    --color-sidebar-active:  #1f2937;
    --color-sidebar-accent:  var(--color-primary);

    /* --- Typografie ---------------------------------------------------- */
    --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-size-base: 15px;
    --line-height:    1.55;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-bold:   700;

    /* --- Abstände (Skala) ---------------------------------------------- */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-8: 3rem;

    /* --- Rundungen ----------------------------------------------------- */
    --radius-sm: 6px;
    --radius:    10px;
    --radius-lg: 16px;

    /* --- Schatten ------------------------------------------------------ */
    --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05);
    --shadow:    0 1px 3px rgba(16, 24, 40, 0.10), 0 1px 2px rgba(16, 24, 40, 0.06);
    --shadow-lg: 0 10px 25px rgba(16, 24, 40, 0.10);

    /* --- Layout-Maße --------------------------------------------------- */
    --sidebar-width: 260px;
    --content-max:   1200px;
    --topbar-height: 64px;

    /* --- Übergänge ----------------------------------------------------- */
    --transition: 150ms ease;
}

/* Optionales Beispiel für selbst gehostete Schrift (DSGVO-konform):
   1) Schrift-Dateien (woff2) unter public/assets/fonts/ ablegen
   2) Kommentar entfernen und --font-sans oben auf "Inter" umstellen

@font-face {
    font-family: "Inter";
    src: url("../fonts/Inter-Regular.woff2") format("woff2");
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: "Inter";
    src: url("../fonts/Inter-SemiBold.woff2") format("woff2");
    font-weight: 600;
    font-display: swap;
}
*/