/**
 * Migrosbank Client-Specific Color System
 *
 * This file contains all Migrosbank brand colors and design tokens.
 * It is only loaded when NEXT_PUBLIC_CLIENT_ID is set to 'migrosbank'.
 *
 * DO NOT import this file directly - it is loaded conditionally via ClientSpecificStyles component
 */

@layer base {
    :root {
        /* ============================================================================
           Primary Colors - Migros Green
           ============================================================================ */
        --primary: 164 58% 19%;
        --primary-hover: 164 59% 12%;
        /* mdx/sys/color/primary/bold2 */
        --primary-bold2: 164 59% 12%;
        --primary-foreground: 0 0% 98%;
        --primary-light: 164 58% 29%;
        --primary-medium: 163 18% 43%;

        /* ============================================================================
           Secondary Colors - Neutral Grays
           ============================================================================ */
        --secondary: 160 10% 94%;
        --secondary-light: 0 0% 96%;
        --secondary-dark: 165 13% 88%;
        --secondary-foreground: 240 5.9% 10%;

        /* ============================================================================
           Accent Colors
           ============================================================================ */
        --accent: 160 10% 94%;
        --accent-foreground: 164 58% 19%;

        /* ============================================================================
           Status Colors
           ============================================================================ */
        --success: 141 74% 30%;
        --warning: 28 90% 49%;
        --error: 354 95% 40%;

        /* ============================================================================
           Component-Specific Colors
           ============================================================================ */

        /* Action Icons */
        --action-icon-light: 164 58% 19%;
        --action-icon-dark: 164 58% 19%;

        /* User Message Bubble */
        --user-message-background: 160 10% 94%;
        --user-message-text: 164 58% 19%;

        /* History Group (Sidebar History) */
        --history-group-title: 164 58% 19%;
        --history-group-item: 164 58% 19%;
        --history-group-active-bg: 165 13% 88%;
        --history-group-hover-bg: 165 13% 88%;

        /* Search Input */
        --search-input-text: 164 58% 19%;
        --search-input-border: 165 13% 88%;
        --search-input-icon: 163 18% 43%;

        /* Header */
        --header-border: 165 13% 88%;

        /* Question Input */
        --question-input-border: 165 13% 88%;
        --question-input-placeholder: 163 18% 43%;
        --question-input-text: 164 58% 19%;

        /* Sidebar Menu Items */
        --sidebar-menu-item-text: 164 58% 19%;
        --sidebar-menu-item-icon: 164 58% 19%;
        --sidebar-menu-item-bg: transparent;

        --sidebar-menu-item-hover-text: 164 58% 19%;
        --sidebar-menu-item-hover-icon: 164 58% 19%;
        --sidebar-menu-item-hover-bg: 165 13% 88%;

        --sidebar-menu-item-active-text: 0 0% 98%;
        --sidebar-menu-item-active-icon: 0 0% 98%;
        --sidebar-menu-item-active-bg: 164 58% 19%;

        /* Error Text */
        --error-text-color: 164 58% 19%;

        /* Chat Suggestion */
        --chat-suggestion-border: 165 13% 88%;

        /* Loading Indicator */
        --loading-indicator-color: 164 58% 19%;

        /* Source Item Label */
        --source-item-label-color: 164 58% 19%;

        /* ============================================================================
           Brand Colors - Migros Specific
           ============================================================================ */
        --brand-green: 164 58% 19%;
        --brand-orange: #ff8c28;
        --brand-pink: #d9007e;
        --brand-purple: 280 58% 26%;
        --brand-purple-light: 280 58% 40%;

        /* Brand Gradients */
        --color-gradient-orange-to-pink: linear-gradient(90deg, #ff8c28 0%, #d9007e 100%);
        --color-orange: #ff8c28;
        --color-pink: #d9007e;

        /* ============================================================================
           Spacing & Layout
           ============================================================================ */
        --radius-sm: calc(0.5rem - 4px);
        --radius-md: calc(0.5rem - 2px);
        --radius-lg: 0.5rem;
        --radius: 0.5rem;

        --new-chat-button-radius: 8px;

        --header-height: 68px;
        --banner-height: 0px;

        /* ============================================================================
           Dark Mode Colors (Currently Disabled)
           ============================================================================ */
        /* Uncomment when dark mode is re-enabled
        --dark-primary: 164 58% 29%;
        --dark-primary-foreground: 240 5.9% 10%;
        --dark-secondary: 240 3.7% 15.9%;
        --dark-secondary-foreground: 0 0% 98%;
        --dark-accent: 280 58% 26%;
        --dark-accent-foreground: 0 0% 98%;
        */
    }
}