/* ==========================================================================
   PAPETERIE SÉNÉGAL — DESIGN TOKENS
   Source unique de vérité : couleurs, typographie, espacements, rayons,
   ombres, durées. Aucune valeur brute ne doit être écrite ailleurs.
   ========================================================================== */

:root {
    color-scheme: light;

    /* ── COULEURS DE MARQUE ───────────────────────────────────────────────
       Indigo (identité conservée du site) + ambre en accent. */
    --primary-50:  #EEF2FF;
    --primary-100: #E0E7FF;
    --primary-200: #C7D2FE;
    --primary-400: #818CF8;
    --primary:     #4F46E5;
    --primary-dark:#4338CA;
    --primary-900: #312E81;

    /* Encre : boutons secondaires, footer, titres. */
    --secondary:      #0F172A;
    --secondary-soft: #1E293B;

    /* Accent ambre : mises en avant, chiffres clés, soulignements. */
    --accent:      #F59E0B;
    --accent-dark: #B45309;
    --accent-soft: #FFFBEB;

    /* ── COULEURS D'ÉTAT ──────────────────────────────────────────────── */
    --success:      #059669;
    --success-soft: #ECFDF5;
    --warning:      #B45309;
    --warning-soft: #FFFBEB;
    --danger:       #DC2626;
    --danger-soft:  #FEF2F2;
    --info:         #0369A1;
    --info-soft:    #F0F9FF;
    --whatsapp:      #25D366;
    --whatsapp-dark: #128C4A;
    --whatsapp-soft: #F0FDF4;

    /* ── SURFACES & TEXTE (contrastes vérifiés AA sur blanc) ──────────── */
    --bg:            #F8FAFC;
    --surface:       #FFFFFF;
    --surface-alt:   #F1F5F9;
    --surface-sunken:#EEF1F6;
    --border:        #E2E8F0;
    --border-strong: #CBD5E1;

    --text:           #0F172A;  /* 16.9:1 */
    --text-secondary: #475569;  /*  7.5:1 */
    --text-muted:     #64748B;  /*  4.8:1 — plancher AA */
    --text-inverse:   #FFFFFF;

    /* ── TYPOGRAPHIE ──────────────────────────────────────────────────── */
    --font-sans:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;

    /* Échelle fluide : plus de media-query pour la taille des titres. */
    --fs-display: clamp(2rem, 1.35rem + 2.6vw, 3.25rem);
    --fs-h1:      clamp(1.6rem, 1.3rem + 1.4vw, 2.35rem);
    --fs-h2:      clamp(1.3rem, 1.15rem + 0.7vw, 1.75rem);
    --fs-h3:      1.15rem;
    --fs-lead:    clamp(1rem, 0.96rem + 0.25vw, 1.125rem);
    --fs-body:    0.9375rem;  /* 15px */
    --fs-sm:      0.875rem;   /* 14px */
    --fs-xs:      0.8125rem;  /* 13px — plancher pour du texte courant */
    --fs-label:   0.75rem;    /* 12px — réservé aux libellés capitales */

    --lh-tight: 1.2;
    --lh-snug:  1.4;
    --lh-body:  1.65;

    --fw-normal: 400;
    --fw-medium: 500;
    --fw-semi:   600;
    --fw-bold:   700;

    /* ── ESPACEMENTS (base 4 px) ──────────────────────────────────────── */
    --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;  --sp-4: 1rem;
    --sp-5: 1.25rem;  --sp-6: 1.5rem;   --sp-8: 2rem;     --sp-10: 2.5rem;
    --sp-12: 3rem;    --sp-16: 4rem;    --sp-20: 5rem;

    /* Rythme vertical des sections (fluide) */
    --section-y: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);

    /* ── RAYONS ───────────────────────────────────────────────────────── */
    --r-xs:   6px;
    --r-sm:   10px;
    --r-md:   14px;
    --r-lg:   18px;
    --r-xl:   24px;
    --r-full: 999px;

    /* ── OMBRES (neutres, discrètes — jamais colorées) ────────────────── */
    --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
    --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.07), 0 2px 4px rgba(15, 23, 42, 0.04);
    --shadow-lg: 0 12px 28px rgba(15, 23, 42, 0.10), 0 4px 8px rgba(15, 23, 42, 0.04);
    --shadow-xl: 0 24px 48px -12px rgba(15, 23, 42, 0.18);

    /* Anneau de focus unique pour tout le site */
    --ring: 0 0 0 3px rgba(79, 70, 229, 0.35);

    /* ── MOUVEMENT ────────────────────────────────────────────────────── */
    --t-fast: 120ms;
    --t-base: 200ms;
    --t-slow: 320ms;
    --ease:   cubic-bezier(0.4, 0, 0.2, 1);

    /* ── STRUCTURE ────────────────────────────────────────────────────── */
    --container: 1280px;
    /* Hauteur réelle de l'en-tête collant une fois le bandeau utilitaire
       défilé (mesurée : 122 px desktop, ~124 px mobile avec la recherche).
       Sert de repère à tout ce qui est `position: sticky` et aux ancres. */
    --header-offset: 132px;

    --z-header: 1030;
    --z-drawer: 1045;
    --z-toast:  1090;
    --z-float:  1020;

    /* ── ALIASES BOOTSTRAP ────────────────────────────────────────────────
       Aligne les composants Bootstrap encore utilisés (grille, offcanvas,
       dropdown, toast) sur nos tokens, sans recompiler Bootstrap. */
    --bs-body-font-family: var(--font-sans);
    --bs-body-font-size: var(--fs-body);
    --bs-body-color: var(--text);
    --bs-body-bg: var(--bg);
    --bs-border-color: var(--border);
    --bs-primary: var(--primary);
    --bs-link-color: var(--primary);
    --bs-link-hover-color: var(--primary-dark);
    --bs-border-radius: var(--r-sm);
    --bs-border-radius-sm: var(--r-xs);
    --bs-border-radius-lg: var(--r-md);
}

/* ── COMPATIBILITÉ ────────────────────────────────────────────────────────
   Anciens noms de variables encore référencés dans des gabarits éditoriaux.
   Conservés en alias pour ne rien casser pendant la transition. */
:root {
    --ink: var(--secondary);
    --steel-900: #0F172A;
    --steel-800: #1E293B;
    --steel-700: #334155;
    --steel-600: #475569;
    --line: var(--border);
    --muted: var(--text-muted);
    --radius: var(--r-md);
    --radius-sm: var(--r-sm);
}

/* ── MODE SOMBRE ──────────────────────────────────────────────────────────
   Seules les surfaces, le texte et les bordures changent : les couleurs de
   marque (--primary, --accent…) restent identiques dans les deux thèmes.

   Source de vérité unique : l'attribut [data-theme] sur <html>. Le script
   inline en tête de base.html le pose de façon SYNCHRONE, avant le premier
   rendu, donc dès que JS tourne l'attribut vaut toujours "light" ou "dark"
   — jamais absent. Le bloc @media ci-dessous ne sert donc que de filet pour
   le très bref instant avant l'exécution de ce script, ou si JS est
   désactivé ; il ne doit JAMAIS se déclencher une fois la page interactive. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        --bg:             #0B1220;
        --surface:        #131B2E;
        --surface-alt:    #1B2438;
        --surface-sunken: #0E1526;
        --border:         #26314A;
        --border-strong:  #374564;

        --text:           #E7EAF3;
        --text-secondary: #B4BCD0;
        --text-muted:     #8B95AE;
        /* --text-inverse n'est PAS redéfini : il ne sert qu'au texte posé sur
           un fond sombre fixe (bannières image + voile), qui ne suit pas le
           thème du site — il doit donc rester blanc dans les deux modes. */

        --accent-soft: #2A2210;
        --success-soft: #0E2A20;
        --warning-soft: #2A2110;
        --danger-soft:  #2A1416;
        --info-soft:    #0E2130;
        --whatsapp-soft: #0E2318;

        --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.30);
        --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.24);
        --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.38), 0 2px 4px rgba(0, 0, 0, 0.24);
        --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.45), 0 4px 8px rgba(0, 0, 0, 0.24);
        --shadow-xl: 0 24px 48px -12px rgba(0, 0, 0, 0.55);

        color-scheme: dark;
    }
}
:root[data-theme="dark"] {
    --bg:             #0B1220;
    --surface:        #131B2E;
    --surface-alt:    #1B2438;
    --surface-sunken: #0E1526;
    --border:         #26314A;
    --border-strong:  #374564;

    --text:           #E7EAF3;
    --text-secondary: #B4BCD0;
    --text-muted:     #8B95AE;
    /* --text-inverse : volontairement pas redéfini, voir plus haut. */

    --accent-soft: #2A2210;
    --success-soft: #0E2A20;
    --warning-soft: #2A2110;
    --danger-soft:  #2A1416;
    --info-soft:    #0E2130;
    --whatsapp-soft: #0E2318;

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.30);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.24);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.38), 0 2px 4px rgba(0, 0, 0, 0.24);
    --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.45), 0 4px 8px rgba(0, 0, 0, 0.24);
    --shadow-xl: 0 24px 48px -12px rgba(0, 0, 0, 0.55);

    color-scheme: dark;
}

/* Transition douce lors de la bascule (désactivée si mouvement réduit demandé). */
@media (prefers-reduced-motion: no-preference) {
    body, .site-header, .site-footer, .card-ue, .surface, [class*="btn-ue"] {
        transition: background-color var(--t-base) var(--ease), color var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
    }
}