/**
 * CSS Custom Properties fuer Farben - Wiki Regattasegeln
 *
 * Diese Datei definiert alle Farben der Website als CSS Custom Properties.
 * Alle anderen CSS-Dateien muessen diese Farben verwenden.
 *
 * Design: Light Mode mit Marineblau (Segler-/Regatta-Thema)
 * Brand: Regattasegeln Wiki
 * Author: Fabian Rossbacher
 * LinkedIn: https://www.linkedin.com/in/fabian-rossbacher/
 */

:root {
    /* Hauptfarben - Marineblau */
    --color-primary: #003366;
    --color-primary-hover: #004080;
    --color-primary-dark: #002244;
    --color-primary-light: rgba(0, 51, 102, 0.1);
    --color-primary-glow: rgba(0, 51, 102, 0.25);

    --color-secondary: #1A5276;
    --color-secondary-hover: #21618C;
    --color-secondary-dark: #154360;
    --color-secondary-light: rgba(26, 82, 118, 0.1);
    --color-secondary-glow: rgba(26, 82, 118, 0.25);

    /* Hintergrundfarben - Light Mode mit Marine-Unterton */
    --color-background: #EEF3F8;
    --color-background-primary: #FFFFFF;
    --color-background-secondary: #E5EDF5;
    --color-background-tertiary: #D9E4EF;
    --color-background-light: #F5F8FB;
    --color-background-elevated: #FFFFFF;

    /* Textfarben - Light Mode */
    --color-text: #142433;
    --color-text-primary: #001A33;
    --color-text-secondary: #334B63;
    --color-text-muted: #4F657A;
    --color-text-subtle: #728599;

    /* Akzentfarben - Regattasegeln Brand */
    --color-accent: #003366;
    --color-accent-hover: #004080;
    --color-accent-secondary: #1A5276;

    /* Statusfarben - Light Mode optimiert */
    --color-success: #4ade80;
    --color-success-hover: #22c55e;
    --color-success-dark: #16a34a;
    --color-success-light: rgba(74, 222, 128, 0.15);
    --color-success-text: #15803d;

    --color-warning: #fbbf24;
    --color-warning-hover: #f59e0b;
    --color-warning-dark: #d97706;
    --color-warning-light: rgba(251, 191, 36, 0.15);
    --color-warning-text: #d97706;

    --color-error: #ef4444;
    --color-error-hover: #dc2626;
    --color-error-dark: #b91c1c;
    --color-error-light: rgba(239, 68, 68, 0.15);
    --color-error-text: #b91c1c;

    --color-info: #1A5276;
    --color-info-hover: #21618C;
    --color-info-dark: #154360;
    --color-info-light: rgba(26, 82, 118, 0.15);
    --color-info-text: #154360;

    /* Hover-Effekte - Light Mode */
    --color-hover-background: #D9E4EF;
    --color-hover-dark: #CEDAE6;
    --color-hover-light: #F5F8FB;
    --color-hover-text: #001A33;
    --color-hover-glow: rgba(0, 51, 102, 0.2);

    /* Rahmen und Trennlinien */
    --color-border: #A8BFD4;
    --color-border-light: #CEDAE6;
    --color-border-dark: #8FA8BE;
    --color-border-subtle: #E5EDF5;
    --color-border-accent: rgba(0, 51, 102, 0.4);
    --color-border-accent-secondary: rgba(26, 82, 118, 0.4);

    /* Schatten - Light Mode */
    --color-shadow: rgba(0, 26, 51, 0.08);
    --color-shadow-light: rgba(0, 26, 51, 0.04);
    --color-shadow-dark: rgba(0, 26, 51, 0.15);
    --color-shadow-colored: rgba(0, 51, 102, 0.15);
    --color-shadow-secondary: rgba(26, 82, 118, 0.15);

    /* Glow-Effekte */
    --color-glow-primary: rgba(0, 51, 102, 0.3);
    --color-glow-secondary: rgba(26, 82, 118, 0.3);
    --color-glow-subtle: rgba(0, 51, 102, 0.15);

    /* Weiss und Schwarz */
    --color-white: #ffffff;
    --color-black: #000000;

    /* Grautoene - Marine getoente Palette */
    --color-gray-100: #E5EDF5;
    --color-gray-200: #D9E4EF;
    --color-gray-300: #A8BFD4;
    --color-gray-400: #8FA8BE;
    --color-gray-500: #728599;
    --color-gray-600: #4F657A;
    --color-gray-700: #334B63;
    --color-gray-800: #1E3347;
    --color-gray-900: #001A33;

    /* Glass-Morphism Effekte */
    --glass-background: rgba(255, 255, 255, 0.78);
    --glass-border: rgba(0, 51, 102, 0.22);
    --glass-shadow: 0 8px 32px 0 rgba(0, 26, 51, 0.1);
    --glass-blur: blur(10px);
}