/*
   ZENTRALE FARBPALETTE
   =====================
   Diese Datei enthält ausschließlich Farben und farbbezogene Effekte.
   Layout, Abstände, Größen und Responsive-Regeln bleiben in style.css
   sowie in layout-desktop.css, layout-tablet.css und layout-mobile.css.

   Verwendung:
   - --color-*       einzelne Farben
   - --surface-*     Hintergründe und Oberflächen
   - --state-*       Status- und Aktionsfarben
   - --shadow-*      farbige Schatten

   Die Datei wird nach style.css geladen, damit alle Farbvariablen im
   gesamten Stylesheet-Ablauf zur Verfügung stehen.
*/

:root {
    /* Seitenhintergrund und Grundtext */
    --color-bg-top: #fff7f1;
    --color-bg-bottom: #f8ecf0;
    --color-text: #3a2330;
    --color-text-heading: #432c39;
    --color-text-heading-soft: #5d3d49;
    --color-muted: #6b4d5d;

    /* Oberflächen */
    --surface: rgba(255, 255, 255, 0.8);
    --surface-strong: #fffaf7;
    --surface-white: #ffffff;
    --surface-soft: #fbfffd;
    --surface-mint: #ebf8f1;
    --surface-sky: #f1ecff;
    --surface-rose: #f8dfe8;

    /* Hauptakzente */
    --color-primary: #d99d5a;
    --color-primary-dark: #bb7c3e;
    --color-accent: #e5799d;
    --color-danger: #d7657e;
    --color-line-soft: rgba(83, 52, 64, 0.12);

    /* Community-/Luxuspalette */
    --color-luxury-gold: #d99d5a;
    --color-luxury-rose: #d76c8a;
    --color-luxury-plum: #4d2d36;
    --color-luxury-dark: #2a1d28;
    --surface-luxury-panel: rgba(255, 250, 246, 0.9);

    /* Status und Drittanbieter-Login */
    --state-success: #1d6a4e;
    --state-success-soft: #f1faf6;
    --state-warning: #e6b35a;
    --state-warning-soft: #fff5df;
    --state-error: #d7657e;
    --state-info: #78c7d9;
    --social-google: #4285f4;
    --social-facebook: #1877f2;
    --social-microsoft: #2f2f2f;
    --color-white: #ffffff;
    --color-black: #000000;

    /* Farbige Schatten */
    --shadow-main: 0 18px 36px rgba(85, 56, 66, 0.12);
}

/* Semantische Aliasnamen für vorhandene Komponenten. */
:root {
    --bg-top: var(--color-bg-top);
    --bg-bottom: var(--color-bg-bottom);
    --text: var(--color-text);
    --muted: var(--color-muted);
    --primary: var(--color-primary);
    --primary-dark: var(--color-primary-dark);
    --accent: var(--color-accent);
    --accent-soft: var(--surface-rose);
    --sky-soft: var(--surface-sky);
    --mint-soft: var(--surface-mint);
    --line-soft: var(--color-line-soft);
    --danger: var(--color-danger);
    --shadow: var(--shadow-main);
    --luxury-gold: var(--color-luxury-gold);
    --luxury-rose: var(--color-luxury-rose);
    --luxury-plum: var(--color-luxury-plum);
    --luxury-dark: var(--color-luxury-dark);
    --luxury-panel: var(--surface-luxury-panel);
}