/**
 * CSS Custom Properties fuer Farben - Wiki Padel
 *
 * Farbangleichung an motions-racket.club:
 * dunkle Flaechen, helle Typografie und Lime-Akzent.
 */

:root {
    /* Dominante Markenfarben (Referenz: motions-racket.club) */
    --color-primary: #c6ff2b;
    --color-primary-hover: #d8ff6a;
    --color-primary-dark: #9dcb17;
    --color-primary-light: rgba(198, 255, 43, 0.12);
    --color-primary-glow: rgba(198, 255, 43, 0.25);

    --color-secondary: #d9dee4;
    --color-secondary-hover: #eef2f6;
    --color-secondary-dark: #b9c1ca;
    --color-secondary-light: rgba(217, 222, 228, 0.12);
    --color-secondary-glow: rgba(217, 222, 228, 0.18);

    /* Hintergrundflaechen */
    --color-background: #090b0d;
    --color-background-primary: #11151a;
    --color-background-secondary: #161b21;
    --color-background-tertiary: #1d232b;
    --color-background-light: #252d36;
    --color-background-elevated: #121820;

    /* Textfarben */
    --color-text: #e7ebf0;
    --color-text-primary: #f7f9fb;
    --color-text-secondary: #c3cbd4;
    --color-text-muted: #98a2ad;
    --color-text-subtle: #7a848f;

    /* Akzente */
    --color-accent: #c6ff2b;
    --color-accent-hover: #d8ff6a;
    --color-accent-secondary: #d9dee4;

    /* Statusfarben */
    --color-success: #44d07d;
    --color-success-hover: #34be6c;
    --color-success-dark: #2ea95f;
    --color-success-light: rgba(68, 208, 125, 0.15);
    --color-success-text: #9be8bc;

    --color-warning: #d9b44a;
    --color-warning-hover: #c9a23a;
    --color-warning-dark: #a58224;
    --color-warning-light: rgba(217, 180, 74, 0.15);
    --color-warning-text: #f1dca1;

    --color-error: #e55b5b;
    --color-error-hover: #cf4f4f;
    --color-error-dark: #b73f3f;
    --color-error-light: rgba(229, 91, 91, 0.15);
    --color-error-text: #ffb7b7;

    --color-info: #4fa5ff;
    --color-info-hover: #3d92eb;
    --color-info-dark: #2b78c5;
    --color-info-light: rgba(79, 165, 255, 0.15);
    --color-info-text: #abd5ff;

    /* Hover und Interaktion */
    --color-hover-background: #1c232b;
    --color-hover-dark: #151a21;
    --color-hover-light: #2a323c;
    --color-hover-text: #fbfdff;
    --color-hover-glow: rgba(198, 255, 43, 0.2);

    /* Rahmen und Trennlinien */
    --color-border: #2b323b;
    --color-border-light: #38414b;
    --color-border-dark: #212730;
    --color-border-subtle: #1a1f27;
    --color-border-accent: rgba(198, 255, 43, 0.38);
    --color-border-accent-secondary: rgba(217, 222, 228, 0.3);

    /* Schatten */
    --color-shadow: rgba(0, 0, 0, 0.35);
    --color-shadow-light: rgba(0, 0, 0, 0.2);
    --color-shadow-dark: rgba(0, 0, 0, 0.55);
    --color-shadow-colored: rgba(198, 255, 43, 0.14);
    --color-shadow-secondary: rgba(217, 222, 228, 0.08);

    /* Glow-Effekte */
    --color-glow-primary: rgba(198, 255, 43, 0.3);
    --color-glow-secondary: rgba(217, 222, 228, 0.14);
    --color-glow-subtle: rgba(198, 255, 43, 0.12);

    /* Basisfarben */
    --color-white: #ffffff;
    --color-black: #000000;

    /* Grautoene */
    --color-gray-100: #eef2f6;
    --color-gray-200: #d9dee4;
    --color-gray-300: #bcc4cd;
    --color-gray-400: #98a2ad;
    --color-gray-500: #7a848f;
    --color-gray-600: #5d6772;
    --color-gray-700: #3f4852;
    --color-gray-800: #2b323b;
    --color-gray-900: #1a1f27;

    /* Glass-Effekt */
    --glass-background: rgba(17, 21, 26, 0.78);
    --glass-border: rgba(198, 255, 43, 0.2);
    --glass-shadow: 0 10px 36px 0 rgba(0, 0, 0, 0.4);
    --glass-blur: blur(10px);
}