/* ============================================================
   MBV2 — DESIGN TOKENS Navy Pop
   Source de vérité : docs/redesign-v2/DESIGN_BRIEF.md §2
   ============================================================ */
:root {
    /* ── Couleurs primaires ── */
    --mb-navy:        #0F2E5C;
    --mb-navy-d:      #0A1F3F;
    --mb-navy-2:      #14386E;

    /* ── Accent safran ── */
    --mb-saf:         #F5B82E;
    --mb-saf-l:       #FFCE5C;
    --mb-saf-d:       #D99F1A;

    /* ── Neutrals ── */
    --mb-cream:       #F5F3EC;
    --mb-paper:       #FAF8F2;
    --mb-white:       #FFFFFF;

    /* ── Texte ── */
    --mb-text:        #1A2030;
    --mb-text-sec:    #4A5060;
    --mb-muted:       #5C6578;
    --mb-on-navy:     #C5D4ED;

    /* ── Lignes & surfaces ── */
    --mb-line:        rgba(15, 46, 92, 0.12);
    --mb-line-strong: rgba(15, 46, 92, 0.24);
    --mb-line-saf:    rgba(245, 184, 46, 0.25);

    /* ── Typographie ── */
    --mb-font-display: 'Archivo', system-ui, -apple-system, Segoe UI, sans-serif;
    --mb-font-serif:   'Fraunces', 'Playfair Display', Georgia, serif;
    --mb-font-body:    'Inter', system-ui, -apple-system, Segoe UI, sans-serif;

    /* ── Échelles typographiques (desktop) ── */
    --mb-h1-home:       48px;
    --mb-h1-category:   40px;
    --mb-h1-dept:       36px;
    --mb-h1-city:       34px;
    --mb-h1-blog:       38px;
    --mb-h1-article:    30px;
    --mb-h2:            22px;
    --mb-h3:            14px;
    --mb-body:          13px;
    --mb-body-lg:       15px;
    --mb-caption:       10px;
    --mb-kicker:        10px;

    /* ── Layout ── */
    --mb-maxw:          1180px;
    --mb-container-px:  22px;
    --mb-section-py:    32px;

    /* ── Radii ── */
    --mb-radius-sm:     8px;
    --mb-radius:        12px;
    --mb-radius-lg:     14px;
    --mb-radius-pill:   30px;

    /* ── Ombres ── */
    --mb-shadow-sm:     0 2px 8px rgba(13, 16, 23, 0.04);
    --mb-shadow:        0 6px 16px rgba(13, 16, 23, 0.08);
    --mb-shadow-lg:     0 14px 32px rgba(13, 16, 23, 0.12);

    /* ── Transitions ── */
    --mb-t-fast:        0.15s ease;
    --mb-t:             0.2s ease;

    /* ── Safe area mobile (sticky bottom bar) ── */
    --mb-bottom-bar-h:  64px;
}

/* ── Échelles mobiles (overrides) ── */
@media (max-width: 768px) {
    :root {
        --mb-h1-home:       32px;
        --mb-h1-category:   28px;
        --mb-h1-dept:       28px;
        --mb-h1-city:       26px;
        --mb-h1-blog:       30px;
        --mb-h1-article:    26px;
        --mb-h2:            20px;
        --mb-h3:            13px;
        --mb-body:          12px;
        --mb-body-lg:       13px;

        --mb-container-px:  16px;
        --mb-section-py:    24px;
    }
}

/* ── Prefers reduced motion ── */
@media (prefers-reduced-motion: reduce) {
    :root {
        --mb-t-fast:    0s;
        --mb-t:         0s;
    }
}