/**
 * Design System myCFiA - Variables CSS
 * Tokens de configuration pour l'ensemble de l'application
 * Aligne sur le design system myCfia-designSystem
 */

:root {
    /* ====================================
       Typographie
       ==================================== */
    --font-family-title: 'Poppins', Arial, sans-serif;
    --font-family-content: 'Calibri', Arial, sans-serif;

    /* Poids */
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;

    /* Tailles */
    --font-size-xs: 11px;
    --font-size-sm: 12px;
    --font-size-base: 14px;
    --font-size-md: 16px;
    --font-size-lg: 18px;
    --font-size-xl: 20px;
    --font-size-2xl: 24px;
    --font-size-3xl: 28px;
    --font-size-4xl: 32px;
    --font-size-xxl: 32px; /* compat ancien code */

    /* ====================================
       Couleurs Primaires (design system)
       ==================================== */
    --color-primary: #003080;
    --color-primary-hover: #00265a;
    --color-secondary: #39BFEF;

    /* ====================================
       Couleurs Auth (login)
       ==================================== */
    --color-tertiary: #e6204c;
    --color-default: #2a1b3d;
    --background-gradient: linear-gradient(
        40deg,
        rgba(48, 42, 80, 1) 20%,
        rgba(77, 68, 135, 1) 57%,
        rgba(127, 194, 220, 1) 95%
    );

    /* ====================================
       Couleurs Chat
       ==================================== */
    --chat-input-text: #183e82;
    --chat-input-bg: #ffffff;
    --message-user-bg: #ffffff;
    --message-assistant-bg: #405d8c;
    --message-user-text: #000000;
    --message-assistant-text: #ffffff;

    /* ====================================
       Couleurs Utilitaires
       ==================================== */
    --color-white: #ffffff;
    --color-black: #000000;
    --color-gray-light: #f5f5f5;
    --color-gray-medium: #cccccc;
    --color-gray-dark: #666666;

    /* ====================================
       Glass Effects (conserves pour composants existants)
       ==================================== */
    --glass-subtle: linear-gradient(119deg, rgba(255, 255, 255, 0.075) 0%, rgba(255, 255, 255, 0.01) 100%);
    --glass-light: linear-gradient(110deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.025) 100%);
    --glass-intense: linear-gradient(92deg, #ffffffe6 0%, #ffffff00 100%);
    --glass-border: 1px solid rgba(255, 255, 255, 0.3);
    --glass-backdrop-blur: 15px;

    /* ====================================
       Espacements (compat ancien code)
       ==================================== */
    --space-xs: 3px;
    --space-sm: 5px;
    --space-md: 10px;
    --space-lg: 15px;
    --space-xl: 20px;
    --space-xxl: 30px;

    /* ====================================
       Border Radius (compat ancien code)
       ==================================== */
    --radius-sm: 5px;
    --radius-md: 10px;
    --radius-lg: 15px;
    --radius-xl: 20px;
    --radius-full: 9999px;

    /* ====================================
       Ombres
       ==================================== */
    --shadow-glass: inset 2px 3px 7px rgba(0, 0, 0, 0.23), 5px 6px 7px rgba(0, 0, 0, 0.1);
    --shadow-message-user: inset 0px 3px 6px #00000029, 3px 5px 8px #00000029;
    --shadow-hover: 0 4px 15px rgba(255, 255, 255, 0.1);

    /* ====================================
       Loading States
       ==================================== */
    --loading-dot-size-sm: 6px;
    --loading-dot-size-md: 8px;
    --loading-dot-size-lg: 10px;
    --spinner-size: 24px;

    /* ====================================
       Transitions
       ==================================== */
    --transition-fast: 150ms ease-in-out;
    --transition-normal: 300ms ease-in-out;
    --transition-slow: 500ms ease-in-out;

    /* ====================================
       Z-Index Layers
       ==================================== */
    --z-index-base: 1;
    --z-index-dropdown: 100;
    --z-index-sidebar: 200;
    --z-index-topbar: 300;
    --z-index-modal: 1000;
    --z-index-toast: 1100;
}