/* =============================================================================
   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. Neue Oberflächenfarben werden ausschließlich hier definiert.

   => 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:            #f4f7f9;   /* Seitenhintergrund */
    --color-surface:       #ffffff;   /* Karten, Panels */
    --color-surface-alt:   #f8f9fb;   /* leicht abgesetzte Flächen */
    --color-border:        #e4e7ec;
    --color-text:          #233044;
    --color-text-muted:    #667085;
    --color-heading:       #182230;

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

    --color-primary-ink: #1d585b;
    --color-accent: #256f73;
    --color-accent-soft: #eaf4f3;
    --color-primary-soft: #eaf4f3;

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

    /* Helle, ruhige Navigation */
    --color-sidebar-bg:      #ffffff;
    --color-sidebar-text:    #475467;
    --color-sidebar-active:  #eaf4f3;
    --color-sidebar-accent:  var(--color-primary);

    --color-sidebar-hover: #f2f4f7;
    --color-nav-heading: #667085;
    --color-overlay: rgba(20, 31, 50, 0.38);
    --color-glass: rgba(255, 255, 255, 0.88);

    /* --- Typografie ---------------------------------------------------- */
    --font-sans: -apple-system, BlinkMacSystemFont, system-ui, "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:   650;

    /* --- 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: 10px;
    --radius:    16px;
    --radius-lg: 20px;

    /* --- Schatten ------------------------------------------------------ */
    --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.025);
    --shadow:    0 6px 24px rgba(25, 38, 59, 0.055);
    --shadow-lg: 0 20px 60px rgba(25, 38, 59, 0.16);

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

    /* --- Übergänge ----------------------------------------------------- */
    --transition: 180ms 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;
}
*/

/* Persönliches dunkles Design: gleicher Aufbau, gleiche Akzentfamilie. */
:root[data-theme="dark"] {
 color-scheme: dark;
 --color-bg:#141b23; --color-surface:#1d2732; --color-surface-alt:#242a33;
 --color-border:#39424f; --color-text:#e8edf2; --color-heading:#f4f7fc; --color-text-muted:#afbdd0;
 --color-primary:#256f73; --color-primary-hover:#1d585b; --color-primary-text:#fff;
 --color-primary-soft:#233b40; --color-primary-ink:#8ccac7; --color-accent:#8ccac7; --color-accent-soft:#233b40;
 --color-sidebar-bg:#1d2732; --color-sidebar-text:#c1cde0; --color-sidebar-active:#233b40;
 --color-sidebar-hover:#242a33; --color-nav-heading:#b2c0d4; --color-glass:rgba(26,36,51,.94);
 --color-success-bg:#183b2c; --color-success-fg:#91dbaf; --color-error-bg:#45252b; --color-error-fg:#ffb2ae;
 --color-info-bg:#223958; --color-info-fg:#a7cbff; --color-warning-bg:#443822; --color-warning-fg:#f4cd88;
 --shadow-lg:0 20px 60px rgba(0,0,0,.4);
}
:root[data-theme="light"] { color-scheme:light; }

/* Bereichsfarben: ruhige Orientierung, ausschließlich für die Oberfläche. */
:root {
 --area-main-ink:#256f73; --area-main-soft:#eaf4f3;
 --area-finance-ink:#335cb8; --area-finance-soft:#eef3ff;
 --area-members-ink:#237465; --area-members-soft:#eaf5f0;
 --area-communication-ink:#7654a4; --area-communication-soft:#f3eff9;
 --area-documents-ink:#8a641f; --area-documents-soft:#faf3e6;
 --area-administration-ink:#5a687d; --area-administration-soft:#eef2f6;
 --area-events-ink:#9b4b6d; --area-events-soft:#f9eef3;
 --area-projects-ink:#4d7350; --area-projects-soft:#eff5ec;
}
:root[data-theme="dark"] {
 --area-main-ink:#8ccac7; --area-main-soft:#233b40;
 --area-finance-ink:#a9c3ff; --area-finance-soft:#273650;
 --area-members-ink:#8dd1b9; --area-members-soft:#203d35;
 --area-communication-ink:#cdb4f1; --area-communication-soft:#373047;
 --area-documents-ink:#dbbc78; --area-documents-soft:#3d3526;
 --area-administration-ink:#b0c4db; --area-administration-soft:#303a47;
 --area-events-ink:#e6acc3; --area-events-soft:#402c39;
 --area-projects-ink:#b2d4a9; --area-projects-soft:#2c3b2d;
}
[data-area] { --area-ink:var(--area-main-ink); --area-soft:var(--area-main-soft); }
[data-area="finance"] { --area-ink:var(--area-finance-ink); --area-soft:var(--area-finance-soft); }
[data-area="members"] { --area-ink:var(--area-members-ink); --area-soft:var(--area-members-soft); }
[data-area="communication"] { --area-ink:var(--area-communication-ink); --area-soft:var(--area-communication-soft); }
[data-area="documents"] { --area-ink:var(--area-documents-ink); --area-soft:var(--area-documents-soft); }
[data-area="administration"] { --area-ink:var(--area-administration-ink); --area-soft:var(--area-administration-soft); }
[data-area="events"] { --area-ink:var(--area-events-ink); --area-soft:var(--area-events-soft); }
[data-area="projects"] { --area-ink:var(--area-projects-ink); --area-soft:var(--area-projects-soft); }

/* Semantische Spezialfarben; keine seitenweisen Farbcodes. */
:root {
 --color-control-border:#7b8799;
 --color-danger-fill:#b42318; --color-danger-hover:#8f1d13;
 --color-document-paper:#ffffff; --color-document-ink:#182230;
 --color-editor-selection:rgba(37,111,115,.04);
 --shadow-dialog-color:rgba(16,24,40,.16); --shadow-accent-color:rgba(37,111,115,.12);
 --file-image:#237465; --file-pdf:#b42318; --file-document:#335cb8;
 --file-sheet:#237465; --file-slide:#8a641f; --file-archive:#8a641f;
 --file-audio:#7654a4; --file-video:#9b4b6d; --file-text:#5a687d;
}
:root[data-theme="dark"] { --color-control-border:#8d9daf; }