/* ============================================
   CSS VARIABLES - DESIGN SYSTEM
   Toutes les variables de couleurs et d'espacement
============================================ */

@font-face {
    font-family: 'CenturyGothicPaneuropean';
    src: url('/font/CenturyGothicPaneuropeanRegular-5dc16903b181408e631c99645a486d6e.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

:root {
    /* COULEURS PRIMAIRES */
    --primary: #0b59b4;
    --primary-dark: #094aa3;
    --primary-light: #a3c7f7;

    /* COULEURS SECONDAIRES */
    --secondary: #ac528b;
    --secondary-dark: #9c427b;
    --secondary-light: #d6b8c8;

    /* COULEURS DE MARQUE */
    --brand-primary: #1b5374;
    --brand-secondary: #0b59b4;
    --brand-accent: #ac528b;

    /* GRADIENTS */
    --gradient-primary: #1b5374;
    --gradient-secondary: #0b59b4;

    /* COULEURS D'ACCENT */
    --accent-gold: #ffd700;
    --accent-success: #48bb78;
    --accent-warning: #ed8936;
    --accent-danger: #e53e3e;
    --accent-info: #4299e1;

    /* COULEURS DE TEXTE */
    --text-primary: #2d3748;
    --text-secondary: #4a5568;
    --text-dark: #1a202c;
    --text-light: #ffffff;
    --text-muted: #a0aec0;

    /* COULEURS DE FOND */
    --bg-body: #f8fafc;
    --bg-white: #ffffff;
    --bg-light: #f7fafc;
    --bg-lighter: #edf2f7;
    --bg-dark: #1a202c;
    --bg-card: #ffffff;

    /* COULEURS DE BORDURES */
    --border-light: #e2e8f0;
    --border-medium: #cbd5e0;
    --border-dark: #a0aec0;

    /* COULEURS D'ETAT */
    --success: #48bb78;
    --success-light: #c6f6d5;
    --success-dark: #2f855a;

    --warning: #ed8936;
    --warning-light: #feebc8;
    --warning-dark: #c05621;

    --danger: #e53e3e;
    --danger-light: #fed7d7;
    --danger-dark: #c53030;

    --info: #4299e1;
    --info-light: #bee3f8;
    --info-dark: #2b6cb0;

    /* OMBRES */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-md: 2px 0 10px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.15);

    /* OVERLAY */
    --overlay-light: rgba(255, 255, 255, 0.1);
    --overlay-medium: rgba(0, 0, 0, 0.1);
    --overlay-dark: rgba(0, 0, 0, 0.5);

    /* ESPACEMENT */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;
    --spacing-3xl: 4rem;

    /* DIMENSIONS */
    --sidebar-width: 280px;
    --header-height: 64px;
    --mobile-header-height: 56px;
    --border-radius-sm: 0.25rem;
    --border-radius-md: 0.5rem;
    --border-radius-lg: 0.75rem;
    --border-radius-xl: 1rem;

    /* TYPOGRAPHIE */
    --font-family-sans: 'CenturyGothicPaneuropean', 'Century Gothic', CenturyGothic, AppleGothic, sans-serif;
    --font-family-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;

    /* TRANSITIONS */
    --transition-fast: 150ms ease-in-out;
    --transition-base: 300ms ease-in-out;
    --transition-slow: 500ms ease-in-out;

    /* Z-INDEX */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
}

/* THEME SOMBRE */
[data-theme="dark"] {
    --bg-body: #1a202c;
    --bg-white: #2d3748;
    --bg-light: #4a5568;
    --text-primary: #f7fafc;
    --text-secondary: #e2e8f0;
    --border-light: #4a5568;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md: 2px 0 10px rgba(0, 0, 0, 0.3);
}