/* =====================================================================
   DREHMOMENT CSS-BUCKET 01: VARIABLES & DESIGN TOKENS
   ===================================================================== */

:root {
    /* Brand Colors (Uve Hoffmann & AHW) */
    --primary-brand: #136cbc;               /* Custom Brand Blue from Logo */
    --primary-brand-hsl: 208, 82%, 41%;     /* HSL representation for opacity usage */
    --primary-brand-light: #2c86d8;         /* Lighter brand blue for hover states */
    
    /* Signal Color (Red Pulse Rule for CTAs) */
    --accent-red: #d32f2f;
    --accent-red-hsl: 3, 65%, 51%;
    --accent-red-light: #f44336;
    
    /* Technical Bridge Color (Electric Cyan) */
    --accent-cyan: #06b6d4;
    --accent-cyan-hsl: 189, 94%, 43%;
    
    /* Dark Mode Theme */
    --primary-dark: #121215;                /* Carbon-Anthracite (instead of pure #121212) */
    --secondary-dark: #1a1a20;              /* Slightly lighter dark background */
    --tertiary-dark: #2c2c2e;               /* For borders and separators */
    
    /* Card Specific backgrounds */
    --card-bg: rgba(255, 255, 255, 0.03);
    --card-bg-hover: rgba(255, 255, 255, 0.06);
    --card-border: rgba(255, 255, 255, 0.05);
    --card-border-hover: rgba(19, 108, 188, 0.4); /* Brand Blue with 40% opacity */
    
    /* Text Colors */
    --text-light: #f5f5f5;
    --text-muted: #b0b0b8;
    --text-dark: #121212;
    
    /* Layout Dimensions */
    --container-width: 1200px;
    --header-height: 100px;
    
    /* Design Tokens */
    --border-radius-lg: 24px;               /* Drehmoment Gold Standard Radius */
    --border-radius-md: 12px;
    --border-radius-sm: 4px;
    
    /* Animations */
    --transition-smooth: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    --transition-fast: all 0.2s ease;
}