/* ===========================================================================
   bv-tokens.css — Design system tokens du site Baptiste Vidal.
   Variables CSS uniquement. Pas de règles ; chargé en premier sur toutes
   les pages front pour que les autres feuilles s'y réfèrent.
   Voir CLAUDE.md §5 pour la justification des choix.
   =========================================================================== */

:root {
    /* ─── Palette ──────────────────────────────────────────────────── */
    --bv-bg:           #FAFAF8;   /* off-white, légèrement chaud */
    --bv-bg-dark:      #0A0A0A;   /* sections inversées + footer */
    --bv-text:         #111111;
    --bv-text-muted:   #6B6B6B;
    --bv-accent:       #1A1A1A;
    --bv-border:       #E8E6E0;

    /* ─── Familles typographiques ────────────────────────────────────
       Cormorant Garamond (serif éditoriale) et DM Sans (sans neutre)
       sont chargées par base.html.twig (Google Fonts CDN — TODO :
       passer en self-hosted woff2 dans public/fonts/ avant la prod
       pour conformité RGPD et perf). Mono : stack système, utilisée
       pour les fiches techniques (mensurations) façon Bruno Tyzio. */
    --bv-font-display: 'Cormorant Garamond', 'Editorial New', Georgia, serif;
    --bv-font-body:    'DM Sans', 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    --bv-font-mono:    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

    /* ─── Échelle typographique resserrée (mobile-first, base 16px) ─
       Une seule échelle cohérente, plus contenue. Le hero garde un
       size dédié (--bv-fs-hero) plus marqué que le reste. */
    --bv-fs-hero:       clamp(3rem, 9vw, 6rem);     /* hero title uniquement */
    --bv-fs-display:    clamp(2.25rem, 5.5vw, 4rem); /* CTA, footer, autres "displays" */
    --bv-fs-h1:         clamp(2rem, 4.5vw, 3.25rem);
    --bv-fs-h2:         clamp(1.5rem, 3vw, 2.25rem);
    --bv-fs-h3:         1.25rem;
    --bv-fs-body-lg:    1.0625rem;
    --bv-fs-body:       1rem;
    --bv-fs-caption:    0.8125rem;
    --bv-fs-micro:      0.6875rem;

    /* Letter-spacing */
    --bv-ls-display:    -0.03em;
    --bv-ls-tight:      -0.015em;
    --bv-ls-normal:     0;
    --bv-ls-caps:       0.08em;

    /* Line-height */
    --bv-lh-tight:      1.05;
    --bv-lh-snug:       1.2;
    --bv-lh-normal:     1.5;
    --bv-lh-loose:      1.75;

    /* ─── Grille & espacements ──────────────────────────────────────
       Marges externes fluides : passe de 20px (mobile) à 32px (>720px)
       à 48px (>1280px) à 5vw (>1600px). Définies via clamp(). */
    --bv-page-margin:   clamp(20px, 5vw, 80px);
    --bv-gutter:        clamp(16px, 2.4vw, 32px);

    /* Spacing scale */
    --bv-space-1:  4px;
    --bv-space-2:  8px;
    --bv-space-3:  12px;
    --bv-space-4:  16px;
    --bv-space-5:  24px;
    --bv-space-6:  32px;
    --bv-space-7:  48px;
    --bv-space-8:  64px;
    --bv-space-9:  96px;
    --bv-space-10: 128px;
    --bv-space-11: 192px;

    /* ─── Header height ─────────────────────────────────────────────── */
    --bv-header-h:      clamp(56px, 6vh, 72px);

    /* ─── Easings ──────────────────────────────────────────────────── */
    --bv-ease-out:      cubic-bezier(0.22, 1, 0.36, 1);
    --bv-ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --bv-ease-in:       cubic-bezier(0.65, 0, 0.35, 1);

    /* ─── Z-index scale ────────────────────────────────────────────── */
    --bv-z-cursor:      9999;
    --bv-z-header:      100;
    --bv-z-modal:       200;
    --bv-z-overlay:     150;

    /* ─── Animation durations ──────────────────────────────────────── */
    --bv-d-fast:        0.2s;
    --bv-d-normal:      0.4s;
    --bv-d-slow:        0.8s;
    --bv-d-reveal:      1.2s;  /* clip-path image reveal */
}