/* 
 * PowerOn | Multi-Agent Service - CSS Variables & Design Tokens
 * Zentrale Definition aller Design-Variablen
 * Diese Datei sollte als erste CSS-Datei eingebunden werden
 */

/* ===== CSS VARIABLES (PowerOn Design System) ===== */
:root {
    --color-bg: #FFFFFF;
    --color-surface: #EFEDE5;
    --color-text: #3A3A3A;
    --color-primary: #C7C5B2;
    --color-primary-hover: #D9D7C6;
    --color-primary-disabled: #E3E2D8;
    --color-secondary: #F25843;
    --color-secondary-hover: #FF6A55;
    --color-secondary-disabled: #F5B0A4;
    --color-red: #dc3545;
    --color-red-hover: #f5c6cb;
    --color-red-disabled: #f8d7da;
    --color-secondary-red: #B94A55;
    --color-secondary-red-hover: #D46872;
    --color-secondary-red-disabled: #E8B7BA;
    --color-gray: #6F7373;
    --color-gray-hover: #565A5A;
    --color-gray-disabled: #B7BBBA;
    --color-medium-gray: #E0DDD3;
    --color-medium-gray-hover: #D1CEC5;
    --color-medium-gray-disabled: #E0DDD380;
    --color-highlight-gray: #F5F3ED;
    --color-highlight-gray-hover: #E6E3DC;
    --color-highlight-gray-disabled: #F5F3ED80;
    
    /* Blue colors for primary buttons */
    --color-blue: #2196F3;
    --color-blue-hover: #1976D2;
    --color-blue-disabled: #BBDEFB;
    
    /* Green colors for info/success toasts */
    --color-green: #4CAF50;
    --color-green-hover: #45A049;
    --color-green-disabled: #C8E6C9;
    
    /* Light red for error toasts */
    --color-red-light: #EF5350;
    --color-red-light-disabled: #FFCDD2;
    
    /* Background color (matching logo2.png) - soft background variant */
    --color-background: #bed1eb;
    --color-background-soft: rgba(211, 226, 238, 0.08);
    --color-background-soft-alt: #f5fbff;
    
    --font-family: "DM Sans", sans-serif;
    
    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    
    /* Border Radius */
    --radius-sm: 15px;
    --radius-md: 25px;
    --radius-lg: 30px;
    
    /* Box Shadow */
    --shadow-sm: inset 0 0 0 1px rgba(199,197,178,.15), 0 0 10px rgba(0, 0, 0, 0.05);
    --shadow-md: inset 0 0 0 1px rgba(199,197,178,.15), 0 0 10px rgba(0, 0, 0, 0.1);
    --shadow-lg: inset 0 0 0 1px rgba(199,197,178,.15), 0 0 20px rgba(0, 0, 0, 0.15);
    
    /* Border */
    --border-color: rgba(199,197,178,.15);
    --border-width: 1px;
    
    /* Button Height */
    --button-height: 50px;
}

.dark-theme {
    --color-bg: #181818;
    --color-surface: #1E1D1A;
    --color-text: #E5E7EB;
    --color-primary: #C7C5B2;
    --color-primary-hover: #E0DECC;
    --color-primary-disabled: #59584F;
    --color-secondary: #F25843;
    --color-secondary-hover: #FF715C;
    --color-secondary-disabled: #6E3E36;
    --color-red: #dc3545;
    --color-red-hover: #f5c6cb;
    --color-red-disabled: #f8d7da;
    --color-secondary-red: #D65D6A;
    --color-secondary-red-hover: #E17683;
    --color-secondary-red-disabled: #70363C;
    --color-gray: #181818;
    --color-gray-hover: #2E2E2E;
    --color-gray-disabled: #505050;
}