/* ==========================================================================
   CREDITO SOLIDARIO — Design tokens
   Palette et échelles inspirées de la démo Brussels du thème Consulting.
   Bleu marine institutionnel + accent or.
   ========================================================================== */

:root {
    /* --- Palette principale --- */
    --color-primary:        #0A2540;   /* Bleu nuit : header, titres, footer */
    --color-primary-600:    #123258;
    --color-primary-500:    #1E3A6A;
    --color-primary-100:    #E8EDF5;

    --color-accent:         #F4A400;   /* Or / ambre : CTA, highlights */
    --color-accent-600:     #D68F00;
    --color-accent-100:     #FEF3D6;

    --color-success:        #1B8354;
    --color-error:          #C0392B;
    --color-warning:        #B7791F;

    /* --- Neutres --- */
    --color-text:           #2D3748;
    --color-text-muted:     #6B7280;
    --color-text-inverse:   #FFFFFF;
    --color-bg:             #FFFFFF;
    --color-bg-alt:         #F5F7FA;
    --color-bg-dark:        #0A2540;
    --color-border:         #E2E8F0;
    --color-border-strong:  #CBD5E0;

    /* --- Typographie --- */
    --font-display: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-body:    'Inter',   system-ui, -apple-system, 'Segoe UI', sans-serif;

    --fs-xs:   0.8125rem;    /* 13px */
    --fs-sm:   0.875rem;     /* 14px */
    --fs-base: 1rem;         /* 16px */
    --fs-md:   1.0625rem;    /* 17px */
    --fs-lg:   1.25rem;      /* 20px */
    --fs-xl:   1.5rem;       /* 24px */
    --fs-2xl:  1.875rem;     /* 30px */
    --fs-3xl:  2.375rem;     /* 38px */
    --fs-4xl:  2.75rem;      /* 44px */
    --fs-5xl:  3.5rem;       /* 56px */
    --fs-6xl:  4rem;         /* 64px */

    --lh-tight: 1.15;
    --lh-snug:  1.35;
    --lh-base:  1.65;

    --fw-regular: 400;
    --fw-medium:  500;
    --fw-semi:    600;
    --fw-bold:    700;
    --fw-black:   800;

    /* --- Espacements --- */
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  20px;
    --space-6:  24px;
    --space-8:  32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;
    --space-24: 96px;
    --space-32: 128px;

    /* --- Conteneurs --- */
    --container-max:   1200px;
    --container-narrow: 900px;
    --container-pad:   24px;

    /* --- Radius --- */
    --radius-sm:  4px;
    --radius-md:  6px;
    --radius-lg:  10px;
    --radius-xl:  16px;
    --radius-full: 999px;

    /* --- Ombres --- */
    --shadow-sm:  0 1px 2px rgba(10, 37, 64, 0.05);
    --shadow-md:  0 4px 12px rgba(10, 37, 64, 0.06);
    --shadow-lg:  0 8px 30px rgba(10, 37, 64, 0.08);
    --shadow-xl:  0 20px 50px rgba(10, 37, 64, 0.12);

    /* --- Transitions --- */
    --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --dur-fast:  150ms;
    --dur-base:  250ms;
    --dur-slow:  400ms;

    /* --- Z-index --- */
    --z-dropdown:   50;
    --z-sticky:     100;
    --z-cookies:    200;
    --z-mobile-menu: 500;

    /* --- Header hauteurs --- */
    --topbar-h:    40px;
    --header-h:    88px;
    --header-h-sm: 72px;
}