/**
 * Global Variables — blumberg
 * Single Source of Truth für alle CSS-Werte
 *
 * Prefix: --bl-
 *
 * REGEL: Kein px in Komponenten-CSS.
 * Immer diese Variablen verwenden.
 */

:root {

    /* ============================================
       BRAND COLORS
       Alle Farben als RGB-Triplets gespeichert.
       Verwendung:  color: rgb(var(--bl-color-primary));
       Mit Alpha:   background: rgba(var(--bl-color-primary), 0.5);
       ============================================ */

    --bl-color-primary:          0, 178, 122;        /* #00b27a Blumberg Grün */
    --bl-color-primary-dark:     0, 148, 102;        /* #009466 */

    --bl-color-secondary:        0, 0, 0;            /* #000000 */
    --bl-color-secondary-dark:   0, 0, 0;            /* #000000 */

    /* ============================================
       NEUTRAL COLORS — Standard, kaum ändern
       ============================================ */

    --bl-color-black:            0, 0, 0;            /* #000000 */
    --bl-color-white:            255, 255, 255;      /* #FFFFFF */
    --bl-color-text:             17, 24, 39;         /* #111827 Haupttext */
    --bl-color-text-muted:       107, 114, 128;      /* #6B7280 Sekundärtext */
    --bl-color-gray-light:       243, 244, 246;      /* #F3F4F6 Hintergründe */
    --bl-color-gray-mid:         156, 163, 175;      /* #9CA3AF Borders, Platzhalter */
    --bl-color-border:           229, 231, 235;      /* #E5E7EB Standard Border */

    /* ============================================
       FEEDBACK COLORS
       ============================================ */

    --bl-color-success:          16, 185, 129;       /* #10B981 */
    --bl-color-warning:          245, 158, 11;       /* #F59E0B */
    --bl-color-error:            239, 68, 68;        /* #EF4444 */
    --bl-color-info:             59, 130, 246;       /* #3B82F6 */

    /* ============================================
       SPACING — Base 16px, nie ändern
       ============================================ */

    --bl-spacing-base:           16px;
    --bl-spacing-xs:             calc(var(--bl-spacing-base) * 0.5);    /*  8px */
    --bl-spacing-sm:             calc(var(--bl-spacing-base) * 0.75);   /* 12px */
    --bl-spacing-md:             calc(var(--bl-spacing-base) * 1);      /* 16px */
    --bl-spacing-lg:             calc(var(--bl-spacing-base) * 1.5);    /* 24px */
    --bl-spacing-xl:             calc(var(--bl-spacing-base) * 2);      /* 32px */
    --bl-spacing-2xl:            calc(var(--bl-spacing-base) * 3);      /* 48px */
    --bl-spacing-3xl:            calc(var(--bl-spacing-base) * 4);      /* 64px */
    --bl-spacing-4xl:            calc(var(--bl-spacing-base) * 6);      /* 96px */

    /* ============================================
       TYPOGRAPHY
       ============================================ */

    --bl-font-family-primary:    'Inter', system-ui, sans-serif;
    --bl-font-family-secondary:  inherit;
    --bl-font-weight-normal:     400;
    --bl-font-weight-medium:     500;
    --bl-font-weight-semibold:   600;
    --bl-font-weight-bold:       700;
    --bl-line-height-tight:      1.2;
    --bl-line-height-normal:     1.5;
    --bl-line-height-loose:      1.75;

    --bl-font-size-xs:           clamp(0.625rem, 0.57rem + 0.27vw, 0.813rem);   /* 10→13px */
    --bl-font-size-sm:           clamp(0.75rem,  0.68rem + 0.36vw, 1rem);       /* 12→16px */
    --bl-font-size-base:         clamp(0.875rem, 0.81rem + 0.36vw, 1.125rem);   /* 14→18px */
    --bl-font-size-lg:           clamp(1rem,     0.93rem + 0.36vw, 1.25rem);    /* 16→20px */
    --bl-font-size-xl:           clamp(1.125rem, 1.02rem + 0.54vw, 1.5rem);     /* 18→24px */
    --bl-font-size-2xl:          clamp(1.313rem, 1.19rem + 0.71vw, 1.813rem);   /* 21→29px */

    /* ============================================
       BORDERS & RADIEN
       ============================================ */

    --bl-border-width:           1px;
    --bl-border-color:           rgb(var(--bl-color-border));
    --bl-border-standard:        1px solid rgb(var(--bl-color-border));

    --bl-border-radius-xs:       2px;
    --bl-border-radius-sm:       4px;
    --bl-border-radius-md:       8px;
    --bl-border-radius-lg:       16px;
    --bl-border-radius-xl:       24px;
    --bl-border-radius-pill:     9999px;

    /* ============================================
       SHADOWS
       ============================================ */

    --bl-shadow-xs:   0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --bl-shadow-sm:   0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
    --bl-shadow-md:   0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --bl-shadow-lg:   0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    --bl-shadow-xl:   0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);

    /* ============================================
       TRANSITIONS
       ============================================ */

    --bl-transition-fast:        0.15s ease-in-out;
    --bl-transition-normal:      0.3s ease-in-out;
    --bl-transition-slow:        0.5s ease-in-out;

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

    --bl-z-below:                -1;
    --bl-z-base:                 1;
    --bl-z-dropdown:             50;
    --bl-z-sticky:               100;
    --bl-z-overlay:              200;
    --bl-z-modal:                300;
    --bl-z-toast:                400;

    /* ============================================
       LAYOUT
       ============================================ */

    --bl-container-max:          1280px;
    --bl-container-padding:      var(--bl-spacing-lg);

}