/**
 * Design Tokens – Single Source of Truth
 * Sportbootclub Itterdamm
 *
 * Lädt VOR allen anderen CSS-Dateien.
 * Löst Konflikte aus theme-custom.css, responsive.css,
 * admin-components.css und glassmorphism.css auf.
 */

:root {

    /* ================================================
       FARBEN – Markenpalette Rhein-Blau / Natur-Grün
       ================================================ */

    /* Primär – Rhein-Blau */
    --color-primary:        #2C5F78;
    --color-primary-dark:   #1a3a4a;
    --color-primary-light:  #3a7291;

    /* Sekundär / Akzent – Natur-Grün */
    --color-accent:         #6B8E23;
    --color-accent-light:   #7da32e;
    --color-secondary:      #3a7291;

    /* Admin-Akzent – Amber (Header-Gradient) */
    --color-admin:          #f59e0b;
    --color-admin-dark:     #d97706;
    --color-admin-darker:   #b45309;

    /* Status */
    --color-success:        #059669;
    --color-warning:        #d97706;
    --color-danger:         #dc2626;
    --color-info:           #3b82f6;

    /* Oberflächen (helles Theme – Admin/Member) */
    --color-background:     #F2E8D5;
    --color-surface:        #ffffff;
    --color-surface-hover:  #f8fafc;
    --color-border:         #e2e8f0;
    --color-border-light:   #f1f5f9;

    /* Text (helles Theme) */
    --color-text:           #1e293b;
    --color-text-secondary: #475569;
    --color-text-muted:     #64748b;
    --color-text-subtle:    #94a3b8;
    --color-text-inverse:   #ffffff;

    /* ================================================
       GLASSMORPHISM – Dunkles Theme (Frontend + Admin-Glass)
       ================================================ */

    /* Hintergründe */
    --glass-primary:        #1a3a4a;
    --glass-bg:             rgba(255, 255, 255, 0.03);
    --glass-bg-light:       rgba(255, 255, 255, 0.05);
    --glass-bg-medium:      rgba(255, 255, 255, 0.08);
    --glass-bg-strong:      rgba(255, 255, 255, 0.12);

    /* Borders */
    --glass-border:         rgba(255, 255, 255, 0.10);
    --glass-border-light:   rgba(255, 255, 255, 0.15);
    --glass-border-strong:  rgba(255, 255, 255, 0.20);

    /* Navigation Glass */
    --nav-blue-glass:       rgba(12, 26, 33, 0.30);
    --nav-blue-glass-hover: rgba(111, 167, 160, 0.35);
    --nav-blue-glass-active:rgba(217, 178, 107, 0.35);
    --nav-blue-border:      rgba(246, 241, 232, 0.15);

    /* Card Glass */
    --card-glass-bg:        rgba(255, 255, 255, 0.04);
    --card-glass-border:    rgba(255, 255, 255, 0.09);

    /* Button Glass – Rhein-Blau */
    --btn-glass-bg:         rgba(44, 95, 120, 0.35);
    --btn-glass-border:     rgba(44, 95, 120, 0.80);
    --btn-glass-hover:      rgba(44, 95, 120, 0.50);

    /* Button Glass – Grün */
    --gold-glass-bg:        rgba(107, 142, 35, 0.25);
    --gold-glass-border:    rgba(107, 142, 35, 0.60);
    --gold-glass-hover:     rgba(107, 142, 35, 0.40);

    /* Text auf dunklem Hintergrund */
    --glass-text:           #ffffff;
    --glass-text-muted:     rgba(255, 255, 255, 0.70);
    --glass-text-subtle:    rgba(255, 255, 255, 0.50);

    /* Schatten Glass */
    --glass-shadow:         0 8px 32px rgba(0, 0, 0, 0.30);
    --glass-shadow-light:   0 4px 16px rgba(0, 0, 0, 0.20);
    --glass-shadow-glow:    0 0 30px  rgba(44, 95, 120, 0.20);

    /* ================================================
       ABMESSUNGEN – einheitliche Skala (rem-basiert)
       Konflikt gelöst: theme-custom px vs. responsive rem
       → rem-Werte, die den rem-Werten von responsive.css entsprechen
       ================================================ */

    --spacing-xs:   0.25rem;   /*  4px */
    --spacing-sm:   0.5rem;    /*  8px */
    --spacing-md:   1rem;      /* 16px */
    --spacing-lg:   1.5rem;    /* 24px */
    --spacing-xl:   2rem;      /* 32px */
    --spacing-2xl:  3rem;      /* 48px */

    /* ================================================
       BORDER RADIUS
       Konflikt gelöst: theme-custom 4/8/12/16 vs. responsive 6/10/14/18
       → Kompromiss: glassmorphism-freundliche Werte
       ================================================ */

    --radius-sm:    6px;
    --radius-md:    10px;
    --radius-lg:    14px;
    --radius-xl:    18px;
    --radius-2xl:   24px;    /* Glass-Cards */
    --radius-full:  9999px;

    /* Admin-Aliasnamen (Rückwärtskompatibilität) */
    --admin-radius:    var(--radius-md);
    --admin-radius-lg: var(--radius-lg);
    --admin-radius-xl: var(--radius-xl);

    /* ================================================
       SCHATTEN (helles Theme)
       ================================================ */

    --shadow-xs:  0 1px 2px  rgba(0, 0, 0, 0.05);
    --shadow-sm:  0 1px 3px  rgba(0, 0, 0, 0.08);
    --shadow-md:  0 4px 6px  rgba(0, 0, 0, 0.07);
    --shadow-lg:  0 10px 15px rgba(0, 0, 0, 0.08);
    --shadow-xl:  0 20px 25px rgba(0, 0, 0, 0.10);

    /* Admin-Aliasnamen */
    --admin-shadow:    var(--shadow-sm);
    --admin-shadow-lg: var(--shadow-md);

    /* ================================================
       BREAKPOINTS (als Custom Properties für JS)
       ================================================ */

    --bp-xs:   480px;
    --bp-sm:   640px;
    --bp-md:   768px;
    --bp-lg:   992px;
    --bp-xl:   1200px;
    --bp-xxl:  1400px;

    /* Touch-Targets */
    --touch-min:         44px;
    --touch-comfortable: 48px;

    /* ================================================
       TYPOGRAFIE
       ================================================ */

    --font-body:     'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-heading:  'Montserrat', var(--font-body);
    --font-display:  'Playfair Display', Georgia, serif;

    --text-xs:   0.75rem;
    --text-sm:   0.875rem;
    --text-base: 1rem;
    --text-lg:   1.125rem;
    --text-xl:   1.25rem;
    --text-2xl:  1.5rem;
    --text-3xl:  1.875rem;

    /* ================================================
       ÜBERGÄNGE
       ================================================ */

    --transition-fast:   150ms ease;
    --transition-normal: 250ms ease;
    --transition-slow:   350ms ease;

    /* ================================================
       Z-INDEX SKALA
       ================================================ */

    --z-base:     1;
    --z-dropdown: 100;
    --z-sticky:   200;
    --z-modal:    300;
    --z-toast:    400;
    --z-overlay:  500;

    /* ================================================
       ADMIN-FARBPALETTE (Graustufen)
       ================================================ */

    --admin-gray-50:  #f9fafb;
    --admin-gray-100: #f3f4f6;
    --admin-gray-200: #e5e7eb;
    --admin-gray-300: #d1d5db;
    --admin-gray-400: #9ca3af;
    --admin-gray-500: #6b7280;
    --admin-gray-600: #4b5563;
    --admin-gray-700: #374151;
    --admin-gray-800: #1f2937;
    --admin-gray-900: #111827;

    /* Admin Status-Badges (helle Variante) */
    --badge-success-bg:    #dcfce7;
    --badge-success-text:  #166534;
    --badge-danger-bg:     #fee2e2;
    --badge-danger-text:   #dc2626;
    --badge-warning-bg:    #fef3c7;
    --badge-warning-text:  #92400e;
    --badge-info-bg:       #dbeafe;
    --badge-info-text:     #1e40af;
    --badge-neutral-bg:    #f3f4f6;
    --badge-neutral-text:  #4b5563;
}

/* ================================================
   RESPONSIVE TOKEN-OVERRIDES
   ================================================ */

@media (max-width: 1024px) {
    :root {
        --spacing-lg:  1.25rem;
        --spacing-xl:  1.75rem;
        --spacing-2xl: 2.5rem;
    }
}

@media (max-width: 768px) {
    :root {
        --spacing-md:  0.75rem;
        --spacing-lg:  1rem;
        --spacing-xl:  1.5rem;
        --spacing-2xl: 2rem;
    }
}

@media (max-width: 480px) {
    :root {
        --spacing-md:  0.625rem;
        --spacing-lg:  0.875rem;
    }
}