/* ================================================================
 * DATIVO — DESIGN TOKENS v1.0
 * Source unique de vérité de toutes les couleurs, typos, espacements,
 * radius et ombres utilisés par les produits Dativo SAS.
 *
 * Inclure dans toute page / produit avant tout autre CSS :
 *   <link rel="stylesheet" href="/_shared/dativo-design-tokens.css">
 *
 * Toute valeur non listée ici doit être discutée avant d'être ajoutée.
 * Dernière mise à jour : 23 mai 2026
 * ================================================================ */

:root {
    /* ---- PALETTE PRINCIPALE ---------------------------------------- */
    --forest:   #1F3D33;   /* Primaire — texte, header, fond foncé */
    --emerald:  #4E7F65;   /* Secondaire — picto, séparateurs, icônes, liens hover */
    --mint:     #B7DDD2;   /* CTA clair sur fond foncé (bandeau email) */
    --tender:   #157F77;   /* Highlights, badges success doux */
    --dew:      #DCF1E0;   /* Surfaces très douces, alerts info */
    --cream:    #FFF8F0;   /* Fond global par défaut (jamais utilisé dans le logo) */
    --terra:    #E37222;   /* Accent chaud — CTA conversion, citations */
    --white:    #FFFFFF;   /* Cartes, modales */

    /* ---- 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 uniquement) -------------------------- */
    --success:  #059669;
    --error:    #B91C1C;
    --warning:  #D97706;
    --info:     #2563EB;

    /* Versions atténuées des sémantiques (badges, alerts) */
    --success-soft: #D1FAE5;
    --error-soft:   #FEE2E2;
    --warning-soft: #FED7AA;
    --info-soft:    #DBEAFE;

    /* ---- 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 16 px, ratio ≈ 1.25) */
    --text-xs:   0.75rem;   /* 12 px — captions, mentions légales */
    --text-sm:   0.875rem;  /* 14 px — UI, badges */
    --text-base: 1rem;      /* 16 px — corps */
    --text-lg:   1.125rem;  /* 18 px — lead body */
    --text-xl:   1.25rem;   /* 20 px — sous-titres */
    --text-2xl:  1.5rem;    /* 24 px — H3 */
    --text-3xl:  1.875rem;  /* 30 px — H2 */
    --text-4xl:  2.25rem;   /* 36 px — H1 */
    --text-5xl:  3rem;      /* 48 px — Hero */

    /* ---- ESPACEMENTS (Base 8, scale 4-8-12-16-24-32-48-64) -------- */
    --space-1:  0.25rem;    /*  4 px */
    --space-2:  0.5rem;     /*  8 px */
    --space-3:  0.75rem;    /* 12 px */
    --space-4:  1rem;       /* 16 px */
    --space-6:  1.5rem;     /* 24 px */
    --space-8:  2rem;       /* 32 px */
    --space-12: 3rem;       /* 48 px */
    --space-16: 4rem;       /* 64 px */
    --space-24: 6rem;       /* 96 px */

    /* ---- RADIUS ---------------------------------------------------- */
    --radius-sm:   6px;     /* Inputs, badges */
    --radius-md:   10px;    /* Boutons, inputs primaires */
    --radius-lg:   16px;    /* Cartes */
    --radius-xl:   24px;    /* Hero, modales */
    --radius-full: 9999px;  /* Pills, avatars */

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

    /* ---- TRANSITIONS ----------------------------------------------- */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 400ms ease;

    /* ---- LAYOUT ---------------------------------------------------- */
    --max-width:   1200px;  /* Largeur max de container */
    --max-text:    65ch;    /* Largeur max d'un paragraphe */
    --nav-height:  64px;
    --header-height: 80px;
}

/* ================================================================ */