/* ================================================================
 * DATIVO - DESIGN TOKENS · Charte V2 « Emerald »
 * Source : CHARTE_GRAPHIQUE.html (22 juin 2026) - Dativo SAS
 * Couleur primaire : Emerald #4E7F65 (PMS 5615 C) - RGAA / WCAG 2.1 AA.
 * Aucune couleur, radius ou ombre hors de ce fichier.
 * ================================================================ */

:root {
    /* ---- ÉCHELLE EMERALD (teinte unique 148°) --------------------- */
    --emerald-900: #193828;
    --emerald-800: #264C38;
    --emerald-700: #37664D;
    --emerald-600: #44755B;
    --emerald-500: #4E7F65;
    --emerald-400: #659E80;
    --emerald-300: #84BD9F;
    --emerald-200: #A7D6BD;
    --emerald-100: #CAEBD9;
    --emerald-50:  #E4F7ED;

    /* ---- RÔLES DE MARQUE ------------------------------------------ */
    --emerald:        #4E7F65;          /* PRIMAIRE · logo, marque, boutons · blanc 4,6:1 AA */
    --primary:        var(--emerald);
    --emerald-hover:  #37664D;          /* survol bouton (6,6:1) */
    --emerald-active: #264C38;          /* clic (9,7:1) */
    --forest:         #1F3D33;          /* ENCRE · textes, fonds foncés · blanc 11,8:1 AAA */
    --tender:         #157F77;          /* Teal accent · blanc 4,8:1 */
    --mint:           #B7DDD2;          /* Surface claire · txt encre 7,8:1 */
    --dew:            #DCF1E0;          /* Surface très douce · txt encre 9,7:1 */
    --terra:          #E37222;          /* Accent conversion · blanc ≥19px bold (3,1:1) */
    --cream:          #FFF8F0;          /* Fond doux alternatif */
    --white:          #FFFFFF;

    /* ---- GRAYS ---------------------------------------------------- */
    --gray-50:  #F9FAFB;
    --gray-100: #F3F4F6;
    --gray-200: #E5E7EB;
    --gray-300: #D1D5DB;
    --gray-400: #9CA3AF;
    --gray-500: #6B7280;
    --gray-600: #4B5563;
    --gray-700: #374151;
    --gray-800: #1F2937;
    --gray-900: #111827;

    /* ---- SÉMANTIQUE (états UI) ------------------------------------ */
    --success: #059669;
    --error:   #B91C1C;
    --warning: #D97706;
    --info:    #2563EB;

    /* ---- TYPOGRAPHIE ---------------------------------------------- */
    --font-display: 'Bricolage Grotesque', system-ui, sans-serif;
    --font-body:    'DM Sans', system-ui, sans-serif;
    --font-accent:  'Fraunces', Georgia, serif;
    --font-mono:    'JetBrains Mono', 'Fira Code', monospace;

    /* Échelle modulaire (base 16px, ratio ≈ 1.25) */
    --text-xs:   0.75rem;
    --text-sm:   0.875rem;
    --text-base: 1rem;
    --text-lg:   1.125rem;
    --text-xl:   1.25rem;
    --text-2xl:  1.5rem;
    --text-3xl:  1.875rem;
    --text-4xl:  2.25rem;
    --text-5xl:  3rem;

    /* ---- ESPACEMENTS --------------------------------------------- */
    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-6:  1.5rem;
    --space-8:  2rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-24: 6rem;

    /* ---- RADIUS -------------------------------------------------- */
    --radius-sm:   6px;
    --radius-md:   10px;
    --radius-lg:   16px;
    --radius-xl:   24px;
    --radius-2xl:  32px;
    --radius-full: 9999px;

    /* ---- OMBRES (teintées Forest, jamais noires) ----------------- */
    --shadow-sm: 0 1px 2px  rgba(31, 61, 51, 0.05);
    --shadow-md: 0 4px 12px rgba(31, 61, 51, 0.08);
    --shadow-lg: 0 8px 30px rgba(31, 61, 51, 0.12);
    --shadow-xl: 0 16px 48px rgba(31, 61, 51, 0.16);
    --shadow-2xl:0 30px 80px rgba(31, 61, 51, 0.22);

    /* ---- TRANSITIONS --------------------------------------------- */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 400ms cubic-bezier(0.16, 1, 0.3, 1);

    /* ---- LAYOUT -------------------------------------------------- */
    --max-width: 1200px;
    --max-text:  65ch;
    --header-height: 76px;

    /* ---- BOOTSTRAP OVERRIDES (remap sur la charte) --------------- */
    --bs-primary: var(--emerald);
    --bs-body-font-family: var(--font-body);
    --bs-body-color: var(--forest);
    --bs-border-radius: var(--radius-md);
}