/* Clever Laden V8 Farben aus Figma
 * 
 * Basierend auf Rectangle-SVGs aus Figma (Rectangle 1-24 + Rectangle.svg)
 * Semantische Namen für bessere Wartbarkeit
 */

/* ============================================
   CSS Custom Properties - Clever Laden V8 Colors
   ============================================ */

:root {
    /* ============================================
       LAYOUT DIMENSIONS - Clever Laden V8
       ============================================ */
    
    /* Container Widths */
    --cl-v8-container-max-width: 980px;        /* Max Content Width (Desktop) */
    --cl-v8-container-padding: 1rem;           /* Container Padding (Mobile) */
    
    /* ============================================
       PRIMARY COLORS - Greens (Clever Laden Brand)
       ============================================ */
    
    /* Primary Green Scale */
    --cl-v8-primary-darkest: #012B27;      /* Rectangle-17 - Darkest Green */
    --cl-v8-primary-dark: #055851;         /* Rectangle-18 - Primary Dark (Header) */
    --cl-v8-primary-medium: #10736B;       /* Rectangle-19 - Medium Green */
    --cl-v8-primary: #209087;              /* Rectangle-20 - Primary Green */
    --cl-v8-primary-bright: #27ABA0;       /* Rectangle-21 - Bright Green (Buttons) */
    --cl-v8-primary-light: #37BAAF;        /* Rectangle-22 - Light Green */
    --cl-v8-primary-lighter: #58C3BA;      /* Rectangle-23 - Lighter Green */
    --cl-v8-primary-lightest: #9EC8AC;     /* Rectangle-24 - Lightest Green */
    
    /* Accent Green */
    --cl-v8-accent-green: #77A605;         /* Rectangle-15 - Accent Green */
    
    /* ============================================
       SECONDARY COLORS - Blues
       ============================================ */
    
    /* Blue Scale */
    --cl-v8-blue-darkest: #0E2032;         /* Rectangle (ohne Nummer) - Very Dark Blue */
    --cl-v8-blue-dark: #152F4E;            /* Rectangle-1 - Dark Blue */
    --cl-v8-blue-medium: #1C497E;          /* Rectangle-2 - Medium Blue */
    --cl-v8-blue: #2B5F90;                 /* Rectangle-3 - Blue */
    --cl-v8-blue-light: #3576B2;           /* Rectangle-4 - Light Blue */
    --cl-v8-blue-lighter: #377ABA;         /* Rectangle-5 - Lighter Blue */
    --cl-v8-blue-bright: #4AA3F6;          /* Rectangle-6 - Bright Blue */
    --cl-v8-blue-gray: #9EB9C8;            /* Rectangle-7 - Blue Gray */
    
    /* ============================================
       NEUTRAL COLORS - Grays & Whites
       ============================================ */
    
    /* Gray Scale */
    --cl-v8-black: #252525;                /* Rectangle-8 - Black/Dark Gray */
    --cl-v8-gray-dark: #3E4347;            /* Rectangle-9 - Dark Gray */
    --cl-v8-gray-medium: #535D63;          /* Rectangle-10 - Medium Gray */
    --cl-v8-gray-light: #9EB9C8;           /* Rectangle-11 - Light Gray */
    --cl-v8-gray-lighter: #E4EAED;         /* Rectangle-12 - Very Light Gray */
    --cl-v8-gray-lightest: #F3F3F3;        /* Rectangle-13 - Lightest Gray */
    --cl-v8-white: #FCFCFC;                /* Rectangle-14 - White */
    
    /* ============================================
       ACCENT COLORS
       ============================================ */
    
    /* Signal Colors */
    --cl-v8-red-signal: #E73E1E;           /* Rectangle-16 - Signal Red (Error, Alert) */
    
    /* ============================================
       SEMANTIC ALIASES - für einfachere Verwendung
       ============================================ */
    
    /* Brand Colors */
    --cl-v8-brand-primary: var(--cl-v8-primary-bright);     /* Primary Brand Color */
    --cl-v8-brand-secondary: var(--cl-v8-blue-medium);      /* Secondary Brand Color */
    --cl-v8-brand-accent: var(--cl-v8-accent-green);        /* Accent Brand Color */
    
    /* Text Colors */
    --cl-v8-text-primary: var(--cl-v8-black);               /* Primary Text */
    --cl-v8-text-secondary: var(--cl-v8-gray-medium);       /* Secondary Text */
    --cl-v8-text-light: var(--cl-v8-gray-light);            /* Light Text */
    --cl-v8-text-inverse: var(--cl-v8-white);               /* Inverse Text (on dark) */
    
    /* Background Colors */
    --cl-v8-bg-primary: var(--cl-v8-white);                 /* Primary Background */
    --cl-v8-bg-secondary: var(--cl-v8-gray-lightest);       /* Secondary Background */
    --cl-v8-bg-dark: var(--cl-v8-primary-dark);             /* Dark Background */
    --cl-v8-bg-darker: var(--cl-v8-primary-darkest);        /* Darker Background */
    
    /* Border Colors */
    --cl-v8-border-light: var(--cl-v8-gray-lighter);        /* Light Border */
    --cl-v8-border-medium: var(--cl-v8-gray-light);         /* Medium Border */
    --cl-v8-border-dark: var(--cl-v8-gray-medium);          /* Dark Border */
    
    /* Interactive Colors */
    --cl-v8-interactive-primary: var(--cl-v8-primary-bright);   /* Primary Button */
    --cl-v8-interactive-secondary: var(--cl-v8-blue-medium);    /* Secondary Button */
    --cl-v8-interactive-accent: var(--cl-v8-accent-green);      /* Accent Button */
    --cl-v8-interactive-danger: var(--cl-v8-red-signal);        /* Danger Button */
    
    /* Status Colors */
    --cl-v8-success: var(--cl-v8-primary-bright);           /* Success State */
    --cl-v8-warning: var(--cl-v8-accent-green);             /* Warning State */
    --cl-v8-error: var(--cl-v8-red-signal);                 /* Error State */
    --cl-v8-info: var(--cl-v8-blue-medium);                 /* Info State */
}

/* ============================================
   DARK MODE SUPPORT (für zukünftige Erweiterung)
   ============================================ */

@media (prefers-color-scheme: dark) {
    :root {
        /* Dark Mode Overrides können hier definiert werden */
        --cl-v8-bg-primary: var(--cl-v8-primary-darkest);
        --cl-v8-text-primary: var(--cl-v8-white);
        --cl-v8-text-secondary: var(--cl-v8-gray-light);
    }
}

/* ============================================
   LAYOUT UTILITY CLASSES
   ============================================ */

/* Container Classes */
.cl-container {
    max-width: var(--cl-v8-container-max-width);
    margin: 0 auto;
    padding: 0 var(--cl-v8-container-padding);
}

.cl-container-full {
    width: 100%;
    padding: 0 var(--cl-v8-container-padding);
}

/* ============================================
   NUTZUNGSBEISPIELE
   ============================================ */

/*
.button-primary {
    background-color: var(--cl-v8-interactive-primary);
    color: var(--cl-v8-text-inverse);
    border: 1px solid var(--cl-v8-interactive-primary);
}

.button-secondary {
    background-color: transparent;
    color: var(--cl-v8-interactive-secondary);
    border: 1px solid var(--cl-v8-interactive-secondary);
}

.header {
    background-color: var(--cl-v8-bg-dark);
    color: var(--cl-v8-text-inverse);
}

.card {
    background-color: var(--cl-v8-bg-primary);
    border: 1px solid var(--cl-v8-border-light);
    color: var(--cl-v8-text-primary);
}

.text-success {
    color: var(--cl-v8-success);
}

.text-error {
    color: var(--cl-v8-error);
}

/* ============================================
   VERWENDUNGSHINWEISE
   ============================================ */

/*
=== Container-Breite verwenden ===

1. Mit CSS-Variable (in Komponenten):
.header-content {
    max-width: var(--cl-v8-container-max-width);
    margin: 0 auto;
}

2. Mit Utility-Klasse (in HTML):
<div class="cl-container">
    <!-- Content mit max-width 980px -->
</div>

3. Vollbreite mit Padding:
<div class="cl-container-full">
    <!-- Content mit 100% Breite + Padding -->
</div>

=== Farben verwenden ===

.button-primary {
    background-color: var(--cl-v8-interactive-primary);
    color: var(--cl-v8-text-inverse);
    border: 1px solid var(--cl-v8-interactive-primary);
}

.header {
    background-color: var(--cl-v8-bg-dark);
    color: var(--cl-v8-text-inverse);
}

.card {
    background-color: var(--cl-v8-bg-primary);
    border: 1px solid var(--cl-v8-border-light);
    color: var(--cl-v8-text-primary);
}
*/