/*--------------------------------------------------------------
# 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 2 - Bordeaux
=============================================*/

/* Neutrale Grundfarben */
--color-white: #ffffff;
--color-gray-050: #faf8f7;
--color-gray-100: #f2efec;
--color-gray-200: #e5ddd8;
--color-gray-300: #d4c8c0;
--color-gray-500: #8c7b74;
--color-gray-700: #5c4b46;
--color-gray-800: #443632;
--color-gray-900: #2a211f;

/* Hauptfarbe */
--color-lime-100: #f6e9ed;
--color-lime-200: #eed2da;
--color-lime-400: #cb7c96;
--color-lime-500: #b85c7b;
--color-lime-600: #9b3f5f;
--color-lime-700: #7b2e49;

/* Akzent */
--color-orange-100: #fff5e8;
--color-orange-300: #e6c38c;
--color-orange-500: #c79645;
--color-orange-600: #a9772c;
--color-orange-700: #82591f;

    /* 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%);
}