/* ════════════════════════════════
   VULTA — Design tokens
   Chargé en premier, hérité par toutes les autres feuilles.

   Thème clair. Le basalte n'est pas le fond : c'est la couleur du texte.
   Le dégradé rose → rouge → jaune reste la signature de la marque, mais
   réservé au logotype, à l'action principale et à UN seul élément fort par
   page. Posé partout, il ne veut plus rien dire.

   Les noms de variables sont ceux du moule d'origine : seules les valeurs
   changent, ce qui repeint l'existant sans le réécrire.
════════════════════════════════ */

:root {
    /* ── Palette de marque ── */
    --basalte: #0B0A0D;
    --cendre: #6E6873;
    --rose-lave: #FF1F7A;
    --rouge-coulee: #FF3D1F;
    --jaune-braise: #FFC13C;
    --pierre-ponce: #F5F0F2;

    /* ── Brand colors (contrat du moule) ── */
    --accent: #FF1F7A;
    --accent2: #FF3D1F;
    --accent-dark: #D6055E;
    --accent-soft: rgba(255, 31, 122, 0.10);
    --green: #1FA97C;
    --red: #E5484D;
    --orange: #C77A0A;
    --pink: #FF1F7A;

    /* ── Texte ── */
    --text: #0B0A0D;
    --muted: #6E6873;
    --text-dim: #948E99;

    /* ── Fonds ──
       Le fond de page est très légèrement rosé plutôt que gris neutre : c'est
       ce qui rattache l'interface à la marque sans poser une seule couleur
       saturée. */
    --bg: #FDF8F9;
    --surface: #FFFFFF;
    --surface-2: #F8F5F6;
    --surface-3: #F1ECEE;

    /* ── Verre dépoli ──
       --blur vaut none volontairement. backdrop-filter refloute l'arrière-plan
       à chaque image : sur des éléments permanents et nombreux (cartes,
       panneaux, barres) le coût est permanent lui aussi. On compense par un
       fond plus opaque, et on garde un vrai flou uniquement sur ce qui
       s'affiche à la demande — modales, menus, toasts — en valeur littérale. */
    --glass-bg: rgba(255, 255, 255, 0.90);
    --glass-border: rgba(255, 255, 255, 0.85);
    --glass-shadow: 0 8px 48px rgba(255, 31, 122, 0.08);
    --blur: none;

    /* ── Bordures ──
       Teintées par l'accent plutôt que grises : la marque passe jusque dans
       les contours, sans jamais devenir voyante. */
    --border: rgba(255, 31, 122, 0.14);
    --border-strong: rgba(255, 31, 122, 0.26);
    --border-neutral: rgba(11, 10, 13, 0.08);

    /* ── Champs ── */
    --input-bg: rgba(255, 255, 255, 0.70);
    --input-border: rgba(255, 31, 122, 0.18);
    --input-radius: 10px;

    /* ── Rayons ── */
    --radius: 16px;
    --radius-sm: 12px;
    --radius-xs: 8px;
    --radius-pill: 999px;

    /* ── Dégradés ── */
    --gradient-accent: linear-gradient(120deg, #FF1F7A 0%, #FF3D1F 55%, #FFC13C 100%);
    --gradient-green: linear-gradient(135deg, var(--green), #178863);
    --gradient-red: linear-gradient(135deg, var(--red), var(--rouge-coulee));

    /* ── Formulaires ── */
    --required: #E5484D;

    /* ── Barre latérale d'administration ── */
    --sw: 240px;

    /* ── Typographie ──
       Display large et affirmée qui dialogue avec le logotype, face de lecture
       neutre pour le corps. */
    --font-display: 'Archivo', 'Arial Black', sans-serif;
    --font-body: 'Instrument Sans', system-ui, -apple-system, sans-serif;

    --fs-hero: clamp(2.5rem, 6vw, 4.6rem);
    --fs-h1: clamp(1.9rem, 3.6vw, 2.8rem);
    --fs-h2: clamp(1.45rem, 2.4vw, 2rem);
    --fs-h3: 1.2rem;
    --fs-body: 1rem;
    --fs-sm: 0.875rem;
    --fs-xs: 0.78rem;

    /* ── Élévation ──
       Rayon de flou 6 à 12 fois le décalage vertical, opacité sous 10 %.
       C'est ce qui fait « posé sur » plutôt que « détouré ». */
    --shadow-sm: 0 2px 12px rgba(11, 10, 13, 0.04);
    --shadow-md: 0 4px 24px rgba(11, 10, 13, 0.06);
    --shadow-lg: 0 8px 48px rgba(11, 10, 13, 0.09);
    --shadow-accent: 0 6px 24px rgba(255, 31, 122, 0.26);

    /* Liseré intérieur haut : une arête éclairée qui simule l'épaisseur d'une
       plaque de verre, sans le coût du flou. */
    --edge-top: inset 0 1px 0 rgba(255, 255, 255, 0.9);

    /* ── Mouvement ── */
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --t-fast: 0.15s var(--ease);
    --t: 0.25s var(--ease);

    /* ── Gabarit ── */
    --container: 1140px;
    --reading: 800px;
    --nav-h: 64px;

    color-scheme: light;
}