/*--------------------------------------------------------------
# Zentrales Farbschema
#
# Alle Farben des Layouts werden hier gebündelt. Für ein neues
# Demo-Farbschema muss im Regelfall nur dieser Block geändert werden.
#
# Namensprinzip:
# --color-*       = grundlegende Farbpalette
# --page-*        = Seitenhintergrund und allgemeiner Text
# --header-*      = Kopfbereich
# --nav-*         = Navigation und Seitenleiste
# --content-*     = Inhaltsflächen und Panels
# --footer-*      = Fußbereich
# --form-*        = Formulare und Suche
# --table-*       = Tabellen
# --image-*       = Bilder und Bildunterschriften
# --status-*      = Hinweise, Hervorhebungen und Fehler
# --shadow-*      = Schatten
#
# Startschema: Grau + Lindgrün + Orange
--------------------------------------------------------------*/

:root {

/*=============================================
  Farbschema 3 - Waldgrün
=============================================*/

/* Neutrale Grundfarben */
--color-white: #ffffff;
--color-gray-050: #f7f8f6;
--color-gray-100: #eef1ec;
--color-gray-200: #dde3dc;
--color-gray-300: #c8d0c6;
--color-gray-500: #758070;
--color-gray-700: #485045;
--color-gray-800: #31372f;
--color-gray-900: #1e221d;

/* Hauptfarbe */
--color-lime-100: #e7f3e8;
--color-lime-200: #d1e7d3;
--color-lime-400: #77b77d;
--color-lime-500: #4d9955;
--color-lime-600: #35783d;
--color-lime-700: #285c2f;

/* Akzent */
--color-orange-100: #fff2e3;
--color-orange-300: #f2c078;
--color-orange-500: #d78625;
--color-orange-600: #b56c14;
--color-orange-700: #8f520c;


    /* Globale Seitenfarben */
    --page-bg: var(--color-gray-100);
    --page-text: var(--color-gray-900);
    --page-text-muted: var(--color-gray-700);
    --page-border: var(--color-gray-300);
    --page-divider: var(--color-gray-500);

    /* Links und Fokus */
    --link-color: var(--color-lime-700);
    --link-hover: var(--color-orange-600);
    --link-visited: var(--color-lime-700);
    --focus-color: var(--color-orange-500);
    --focus-ring: 0 0 0 3px rgb(223 138 46 / 28%);

    /* Header */
    --header-bg-start: var(--color-gray-800);
    --header-bg-middle: var(--color-lime-500);
    --header-bg-end: var(--color-orange-500);
    --header-text: var(--color-white);
    --header-title-highlight: var(--color-lime-200);
    --header-title-shadow: var(--color-gray-900);
    --topbar-bg: var(--color-gray-900);

    /* Navigation und Seitenleiste
       --nav-area-bg färbt die vollständige linke Layoutspalte.
       --nav-panel-bg färbt das darin liegende Panel. */
    --nav-area-bg: var(--color-lime-200);
    --nav-panel-bg: var(--color-gray-050);
    --nav-text: var(--color-gray-900);
    --nav-border: var(--color-gray-200);
    --nav-hover-bg: var(--color-lime-100);
    --nav-hover-text: var(--color-lime-700);
    --nav-active-bg: var(--color-lime-200);
    --nav-active-text: var(--color-gray-900);
    --nav-submenu-accent: var(--color-orange-500);
    --nav-content-divider: var(--color-lime-600);
    --hamburger-color: var(--color-gray-800);

    /* Hauptinhalt und Panels
       --content-area-bg färbt die vollständige rechte Layoutspalte.
       --content-panel-bg bleibt als ruhige Lesefläche bewusst hell. */
    --content-area-bg: var(--color-gray-200);
    --content-panel-bg: var(--color-white);
    --content-panel-text: var(--page-text);
    --content-panel-border: var(--color-gray-300);
    --content-heading: var(--color-gray-900);
    --content-heading-accent: var(--color-lime-600);
    --panel-heading-bg: var(--color-lime-100);
    --panel-footer-bg: var(--color-gray-100);
    --panel-footer-border: var(--color-gray-300);

    /* Footer */
    --footer-bg: var(--color-gray-800);
    --footer-text: var(--color-gray-050);
    --footer-link: var(--color-lime-200);
    --footer-link-hover: var(--color-orange-300);

    /* Formulare und Suche */
    --form-bg: var(--color-white);
    --form-text: var(--color-gray-900);
    --form-placeholder: var(--color-gray-500);
    --form-border: var(--color-lime-600);
    --form-border-focus: var(--color-orange-500);
    --form-button-bg: var(--color-lime-600);
    --form-button-bg-hover: var(--color-orange-600);
    --form-button-text: var(--color-white);

    /* Tabellen */
    --table-border: var(--color-gray-500);
    --table-head-bg-start: var(--color-lime-600);
    --table-head-bg-end: var(--color-lime-100);
    --table-head-text: var(--color-gray-900);
    --table-row-bg: var(--color-white);
    --table-row-alt-bg: var(--color-gray-050);

    /* Bilder */
    --image-border: var(--color-gray-700);
    --image-caption: var(--color-gray-700);

    /* Hinweise und Hervorhebungen */
    --status-highlight-bg: var(--color-orange-500);
    --status-highlight-text: var(--color-white);
    --selection-bg: var(--color-lime-200);
    --selection-text: var(--color-gray-900);

    /* Schatten */
    --shadow-header: 0 2px 5px rgb(0 0 0 / 35%);
    --shadow-panel: 0 3px 10px rgb(32 36 31 / 14%);
    --shadow-image: 3px 5px 8px rgb(0 0 0 / 45%);
}