/*
|--------------------------------------------------------------------------
| Event-Furs Designsystem
|--------------------------------------------------------------------------
|
| Zentrale Variablen für Farben, Abstände, Rundungen, Schatten,
| Übergänge und Größen.
|
| Änderungen an grundlegenden Designwerten sollen möglichst nur
| in dieser Datei vorgenommen werden.
|
*/


/*
|--------------------------------------------------------------------------
| Grundfarben
|--------------------------------------------------------------------------
*/

:root {
    --color-white: #ffffff;
    --color-black: #000000;

    --color-slate-50: #f8fafc;
    --color-slate-100: #f1f5f9;
    --color-slate-200: #e2e8f0;
    --color-slate-300: #cbd5e1;
    --color-slate-400: #94a3b8;
    --color-slate-500: #64748b;
    --color-slate-600: #475569;
    --color-slate-700: #334155;
    --color-slate-800: #1e293b;
    --color-slate-900: #0f172a;
    --color-slate-950: #020617;


    /*
    |--------------------------------------------------------------------------
    | Primärfarben
    |--------------------------------------------------------------------------
    */

    --color-primary-100: #dbeafe;
    --color-primary-200: #bfdbfe;
    --color-primary-300: #93c5fd;
    --color-primary-400: #60a5fa;
    --color-primary-500: #3b82f6;
    --color-primary-600: #2563eb;
    --color-primary-700: #1d4ed8;
    --color-primary-800: #1e40af;


    /*
    |--------------------------------------------------------------------------
    | Statusfarben
    |--------------------------------------------------------------------------
    */

    --color-success-500: #22c55e;
    --color-success-600: #16a34a;
    --color-success-700: #15803d;
    --color-success-800: #166534;

    --color-warning-500: #f59e0b;
    --color-warning-600: #d97706;
    --color-warning-700: #b45309;

    --color-danger-500: #ef4444;
    --color-danger-600: #dc2626;
    --color-danger-700: #b91c1c;
    --color-danger-800: #991b1b;

    --color-info-400: #60a5fa;
    --color-info-500: #3b82f6;
    --color-info-600: #2563eb;
    --color-info-700: #1d4ed8;


    /*
    |--------------------------------------------------------------------------
    | Semantische Buttonfarben
    |--------------------------------------------------------------------------
    */

    --color-primary: var(--color-primary-600);
    --color-primary-hover: var(--color-primary-700);

    --color-success: var(--color-success-600);
    --color-success-hover: var(--color-success-700);

    --color-warning: var(--color-warning-600);
    --color-warning-hover: var(--color-warning-700);

    --color-danger: var(--color-danger-600);
    --color-danger-hover: var(--color-danger-700);

    --color-info: var(--color-info-600);
    --color-info-hover: var(--color-info-700);

    --color-secondary: var(--color-slate-700);
    --color-secondary-hover: var(--color-slate-600);


    /*
    |--------------------------------------------------------------------------
    | Seitenhintergrund
    |--------------------------------------------------------------------------
    */

    --background-page-start: #0b1120;
    --background-page-middle: #132238;
    --background-page-end: #1b365d;

    --background-header: rgba(15, 23, 42, 0.95);
    --background-footer: rgba(15, 23, 42, 0.95);

    --background-surface: rgba(15, 23, 42, 0.85);
    --background-surface-strong: rgba(15, 23, 42, 0.95);
    --background-surface-solid: #0f172a;

    --background-surface-hover: rgba(30, 41, 59, 0.92);
    --background-overlay: rgba(0, 0, 0, 0.75);


    /*
    |--------------------------------------------------------------------------
    | Textfarben
    |--------------------------------------------------------------------------
    */

    --text-primary: #f8fafc;
    --text-secondary: #cbd5e1;
    --text-muted: #94a3b8;
    --text-dark: #0f172a;
    --text-link: #93c5fd;
    --text-link-hover: #bfdbfe;


    /*
    |--------------------------------------------------------------------------
    | Rahmen
    |--------------------------------------------------------------------------
    */

    --border-color: rgba(255, 255, 255, 0.08);
    --border-color-strong: rgba(255, 255, 255, 0.14);
    --border-color-primary: rgba(96, 165, 250, 0.25);

    --border-width: 1px;


    /*
    |--------------------------------------------------------------------------
    | Akzentfarben der Frontend-Bereiche
    |--------------------------------------------------------------------------
    |
    | Diese Farben werden später über Bereichsklassen verwendet.
    |
    */

    --theme-home: #60a5fa;
    --theme-events: #f59e0b;
    --theme-membership: #22c55e;
    --theme-club: #818cf8;
    --theme-contact: #2dd4bf;
    --theme-gallery: #c084fc;

    --theme-current: var(--theme-home);


    /*
    |--------------------------------------------------------------------------
    | Schriftarten
    |--------------------------------------------------------------------------
    */

    --font-family-base:
        Arial,
        Helvetica,
        sans-serif;

    --font-family-heading:
        Arial,
        Helvetica,
        sans-serif;


    /*
    |--------------------------------------------------------------------------
    | Schriftgrößen
    |--------------------------------------------------------------------------
    */

    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-md: 1.125rem;
    --font-size-lg: 1.25rem;
    --font-size-xl: 1.5rem;
    --font-size-2xl: 2rem;
    --font-size-3xl: 2.5rem;
    --font-size-4xl: 3.25rem;

    --line-height-tight: 1.2;
    --line-height-heading: 1.3;
    --line-height-base: 1.6;


    /*
    |--------------------------------------------------------------------------
    | Schriftstärken
    |--------------------------------------------------------------------------
    */

    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;


    /*
    |--------------------------------------------------------------------------
    | Abstände
    |--------------------------------------------------------------------------
    */

    --spacing-1: 4px;
    --spacing-2: 8px;
    --spacing-3: 12px;
    --spacing-4: 16px;
    --spacing-5: 20px;
    --spacing-6: 24px;
    --spacing-7: 30px;
    --spacing-8: 40px;
    --spacing-9: 50px;
    --spacing-10: 60px;
    --spacing-11: 80px;
    --spacing-12: 100px;


    /*
    |--------------------------------------------------------------------------
    | Rundungen
    |--------------------------------------------------------------------------
    */

    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 10px;
    --radius-xl: 12px;
    --radius-2xl: 16px;
    --radius-3xl: 24px;
    --radius-round: 999px;


    /*
    |--------------------------------------------------------------------------
    | Schatten
    |--------------------------------------------------------------------------
    */

    --shadow-sm:
        0 4px 12px rgba(0, 0, 0, 0.15);

    --shadow-md:
        0 10px 25px rgba(0, 0, 0, 0.25);

    --shadow-lg:
        0 20px 45px rgba(0, 0, 0, 0.35);

    --shadow-glow:
        0 0 30px rgba(96, 165, 250, 0.15);


    /*
    |--------------------------------------------------------------------------
    | Unschärfe
    |--------------------------------------------------------------------------
    */

    --blur-sm: blur(6px);
    --blur-md: blur(8px);
    --blur-lg: blur(12px);


    /*
    |--------------------------------------------------------------------------
    | Übergänge
    |--------------------------------------------------------------------------
    */

    --transition-fast: 0.15s ease;
    --transition-base: 0.2s ease;
    --transition-slow: 0.3s ease;


    /*
    |--------------------------------------------------------------------------
    | Layoutgrößen
    |--------------------------------------------------------------------------
    */

    --layout-max-width: 1400px;
    --content-max-width: 1100px;
    --text-max-width: 760px;

    --header-height: auto;


    /*
    |--------------------------------------------------------------------------
    | Ebenen
    |--------------------------------------------------------------------------
    */

    --z-index-dropdown: 1000;
    --z-index-header: 1100;
    --z-index-modal: 99999;
}


/*
|--------------------------------------------------------------------------
| Bereichsfarben
|--------------------------------------------------------------------------
|
| Die jeweilige Klasse wird später am body-Element gesetzt.
|
*/

.theme-home {
    --theme-current: var(--theme-home);
}

.theme-events {
    --theme-current: var(--theme-events);
}

.theme-membership {
    --theme-current: var(--theme-membership);
}

.theme-club {
    --theme-current: var(--theme-club);
}

.theme-contact {
    --theme-current: var(--theme-contact);
}

.theme-gallery {
    --theme-current: var(--theme-gallery);
}