/**
 * CSS Custom Properties – Rettungshundestaffel / SAR
 *
 * Typisches Farbschema: Rettungs-Orange (Sichtbarkeit, Einsatz)
 * plus Einsatz-Blau (Vertrauen, Organisation) auf hellem Hintergrund.
 *
 * Author: Fabian Rossbacher
 * Änderungsprotokoll: 2026-07-06 | Cursor Agent | @skill-css-rules | Rettungshundestaffel-Farbschema
 */

:root {
    /* Rettungs-Orange (Primaer) */
    --color-primary: #E65100;
    --color-primary-hover: #CC4700;
    --color-primary-dark: #BF360C;
    --color-primary-light: rgba(230, 81, 0, 0.12);
    --color-primary-glow: rgba(230, 81, 0, 0.28);
    --color-primary-rgb: 230, 81, 0;

    /* Einsatz-Blau (Sekundaer) */
    --color-secondary: #1B365D;
    --color-secondary-hover: #152A4A;
    --color-secondary-dark: #0F2038;
    --color-secondary-light: rgba(27, 54, 93, 0.12);
    --color-secondary-glow: rgba(27, 54, 93, 0.22);
    --color-secondary-rgb: 27, 54, 93;

    /* Hintergruende – sachlich, kuehl */
    --color-background: #F4F7FA;
    --color-background-primary: #FFFFFF;
    --color-background-secondary: #EEF2F6;
    --color-background-tertiary: #E3EAF0;
    --color-background-light: #FAFBFC;
    --color-background-elevated: #FFFFFF;

    /* Text */
    --color-text: #1A2332;
    --color-text-primary: #0F172A;
    --color-text-secondary: #475569;
    --color-text-muted: #64748B;
    --color-text-subtle: #94A3B8;

    /* Akzente */
    --color-accent: #E65100;
    --color-accent-hover: #CC4700;
    --color-accent-secondary: #1B365D;

    /* Status */
    --color-success: #15803D;
    --color-success-hover: #166534;
    --color-success-dark: #14532D;
    --color-success-light: rgba(21, 128, 61, 0.12);
    --color-success-text: #15803D;

    --color-warning: #D97706;
    --color-warning-hover: #B45309;
    --color-warning-dark: #92400E;
    --color-warning-light: rgba(217, 119, 6, 0.12);
    --color-warning-text: #B45309;

    --color-error: #DC2626;
    --color-error-hover: #B91C1C;
    --color-error-dark: #991B1B;
    --color-error-light: rgba(220, 38, 38, 0.12);
    --color-error-text: #B91C1C;

    --color-info: #1B365D;
    --color-info-hover: #152A4A;
    --color-info-dark: #0F2038;
    --color-info-light: rgba(27, 54, 93, 0.12);
    --color-info-text: #1B365D;

    /* Hover */
    --color-hover-background: #FFF3EC;
    --color-hover-dark: #FFE8D9;
    --color-hover-light: #FFFAF7;
    --color-hover-text: #0F172A;
    --color-hover-glow: rgba(230, 81, 0, 0.18);

    /* Rahmen */
    --color-border: #CBD5E1;
    --color-border-light: #E2E8F0;
    --color-border-dark: #94A3B8;
    --color-border-subtle: #EEF2F6;
    --color-border-accent: rgba(230, 81, 0, 0.35);
    --color-border-accent-secondary: rgba(27, 54, 93, 0.35);

    /* Schatten */
    --color-shadow: rgba(15, 23, 42, 0.08);
    --color-shadow-light: rgba(15, 23, 42, 0.04);
    --color-shadow-dark: rgba(15, 23, 42, 0.14);
    --color-shadow-colored: rgba(230, 81, 0, 0.14);
    --color-shadow-secondary: rgba(27, 54, 93, 0.12);

    /* Glow */
    --color-glow-primary: rgba(230, 81, 0, 0.28);
    --color-glow-secondary: rgba(27, 54, 93, 0.22);
    --color-glow-subtle: rgba(230, 81, 0, 0.12);

    --color-white: #FFFFFF;
    --color-black: #000000;

    --color-gray-100: #F1F5F9;
    --color-gray-200: #E2E8F0;
    --color-gray-300: #CBD5E1;
    --color-gray-400: #94A3B8;
    --color-gray-500: #64748B;
    --color-gray-600: #475569;
    --color-gray-700: #334155;
    --color-gray-800: #1E293B;
    --color-gray-900: #0F172A;

    --glass-background: rgba(255, 255, 255, 0.82);
    --glass-border: rgba(27, 54, 93, 0.14);
    --glass-shadow: 0 8px 32px 0 rgba(15, 23, 42, 0.08);
    --glass-blur: blur(10px);
}