/* ===== Variables charte graphique CeasyRM ===== */
:root {
    /* Palette – Mode clair (design.md) */
    --bg-primary:     #F9F7F5;
    --bg-secondary:   #EEF0F4;
    --surface:        #FFFFFF;
    --surface-raised: #FFFFFF;
    --text-primary:   #111827;
    --text-secondary: #64748B;
    --color-primary:  #2563EB;
    --color-accent:   #0F766E;
    --color-warning:  #D97706;
    --color-success:  #16A34A;
    --color-error:    #DC2626;
    --separator:      #E2E8F0;

    /* Compat aliases */
    --card:           var(--surface);
    --action:         var(--color-primary);
    --action-hover:   #1D4ED8;
    --accent:         var(--color-accent);
    --warning:        var(--color-warning);
    --success:        var(--color-success);
    --success-hover:  #15803D;
    --error:          var(--color-error);

    /* Typographie */
    --font-family:    Inter, system-ui, sans-serif;
    --fs-page:        24px;
    --fs-section:     18px;
    --fs-block:       16px;
    --fs-text:        15px;
    --fs-small:       13px;
    --fs-micro:       11px;

    /* Espacements */
    --space-xs:       4px;
    --space-compact:  8px;
    --space-base:     16px;
    --space-large:    24px;
    --space-xl:       32px;
    --padding-card:   16px;
    --gap-cards:      12px;

    /* Formes et ombres */
    --radius-input:   12px;
    --radius-card:    16px;
    --radius-badge:   6px;
    --shadow-card:    0 2px 8px rgba(0, 0, 0, 0.10);
    --shadow-raised:  0 4px 16px rgba(0, 0, 0, 0.16);

    /* Transitions */
    --transition:      all 0.18s ease-out;
    --transition-slow: all 0.28s ease-out;

    /* Gradients */
    --gradient-hero:   linear-gradient(135deg, #2563EB 0%, #0F766E 100%);
    --gradient-avatar: linear-gradient(135deg, #2563EB 0%, #0F766E 100%);
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg-primary:     #0E0F11;
        --bg-secondary:   #161820;
        --surface:        #1C2030;
        --surface-raised: #232840;
        --text-primary:   #F1F5F9;
        --text-secondary: #94A3B8;
        --color-primary:  #60A5FA;
        --color-accent:   #2DD4BF;
        --color-warning:  #FBBF24;
        --color-success:  #4ADE80;
        --color-error:    #F87171;
        --separator:      #1E2535;

        --action-hover:   #3B82F6;
        --success-hover:  #22C55E;
        --shadow-card:    0 2px 8px rgba(0, 0, 0, 0.33);
        --shadow-raised:  0 4px 16px rgba(0, 0, 0, 0.44);
        --gradient-hero:  linear-gradient(135deg, #1E3A5F 0%, #134E4A 100%);
    }
}

html[data-theme="dark"] {
    --bg-primary:     #0E0F11;
    --bg-secondary:   #161820;
    --surface:        #1C2030;
    --surface-raised: #232840;
    --text-primary:   #F1F5F9;
    --text-secondary: #94A3B8;
    --color-primary:  #60A5FA;
    --color-accent:   #2DD4BF;
    --color-warning:  #FBBF24;
    --color-success:  #4ADE80;
    --color-error:    #F87171;
    --separator:      #1E2535;

    --card:           var(--surface);
    --action:         var(--color-primary);
    --accent:         var(--color-accent);
    --warning:        var(--color-warning);
    --success:        var(--color-success);
    --error:          var(--color-error);

    --action-hover:   #3B82F6;
    --success-hover:  #22C55E;
    --shadow-card:    0 2px 8px rgba(0, 0, 0, 0.33);
    --shadow-raised:  0 4px 16px rgba(0, 0, 0, 0.44);
    --gradient-hero:  linear-gradient(135deg, #1E3A5F 0%, #134E4A 100%);
}

html[data-theme="light"] {
    --bg-primary:     #F9F7F5;
    --bg-secondary:   #EEF0F4;
    --surface:        #FFFFFF;
    --surface-raised: #FFFFFF;
    --text-primary:   #111827;
    --text-secondary: #64748B;
    --color-primary:  #2563EB;
    --color-accent:   #0F766E;
    --color-warning:  #D97706;
    --color-success:  #16A34A;
    --color-error:    #DC2626;
    --separator:      #E2E8F0;

    --card:           var(--surface);
    --action:         var(--color-primary);
    --accent:         var(--color-accent);
    --warning:        var(--color-warning);
    --success:        var(--color-success);
    --error:          var(--color-error);

    --action-hover:   #1D4ED8;
    --success-hover:  #15803D;
    --shadow-card:    0 2px 8px rgba(0, 0, 0, 0.10);
    --shadow-raised:  0 4px 16px rgba(0, 0, 0, 0.16);
    --gradient-hero:  linear-gradient(135deg, #2563EB 0%, #0F766E 100%);
}