/* ==========================================================================
   vbx-tokens.css
   --------------------------------------------------------------------------
   Rôle     : Source de vérité unique pour toutes les valeurs de design du
              projet VBX. Ce fichier ne contient QUE des custom properties.
              Aucune classe, aucune règle CSS.

   Chargé   : EN PREMIER dans le Head, avant tout autre fichier CSS.

   Règle    : Ne jamais écrire de valeur en dur dans un autre fichier CSS.
              Toujours référencer un token --vbx-*.
   --------------------------------------------------------------------------

   TABLE DES MATIÈRES
   ------------------
   1. Couleurs
   2. Typographie
   3. Espacements
   4. Border Radius
   5. Ombres
   6. Transitions
   7. Z-index
   8. Breakpoints

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

:root {

    /* ------------------------------------------------------------------
       1. COULEURS
    ------------------------------------------------------------------ */

    /* Primaires — BLG */
    --vbx-color-primary: #008489;
    --vbx-color-primary-hover: #017a7f;          /* BLG Gradient Dark — start color */
    --vbx-color-primary-dark: #017a7f;
    --vbx-color-primary-gradient: linear-gradient(78deg, #008489 -4.87%, #00BABE 106.4%);      /* BLG Gradient — valeurs exactes Figma */
    --vbx-color-primary-gradient-dark: linear-gradient(72deg, #017A7F 0%, #01A4A7 100%);       /* BLG Gradient Dark — hover */
    --vbx-color-primary-light: #DCECEC;       
    --vbx-color-primary-light-hover: #C8E0E0;
    --vbx-color-primary-lightest: #F2F9F9;  

    /* Basique */
    --vbx-color-white: #FFFFFF;
    --vbx-color-black: #0B0B0B;

    /* Texte */
    --vbx-color-text-primary: #2D2D2D;        /* Text Main — Grey 900 */
    --vbx-color-text-secondary: #767676;      /* Text Secondary — Grey 700 */

    /* Gris */
    --vbx-color-grey-800: #484848;
    --vbx-color-grey-100: #E4E4E4;
    --vbx-color-border: #DADADA;
    --vbx-color-border-dark: #C5C5C5;

    /* Backgrounds */
    --vbx-color-bg-alt: #FDFDFD;              /* Background Alternative */
    --vbx-color-bg-alt-secondary: #FBFBFB;   /* Background Alternative Secondary */
    --vbx-color-bg-secondary: #F2F2F2;        /* Background Secondary — Grey 50 */
    --vbx-color-bg-hover: #F5F5F5;

    /* Overlays */
    --vbx-color-overlay: rgba(45, 45, 45, 0.30);
    --vbx-color-focus-ring: rgba(0, 132, 137, 0.25);

    /* Focus ring — noir pur imposé par le design system pour l'accessibilité clavier */
    --vbx-color-focus-ring-solid: #000000;

    /* Feedbacks — Alert (Warning) */
    --vbx-color-warning-bg: #FFF5D8;          /* Alert Light */
    --vbx-color-warning-border: #FDE68A;
    --vbx-color-warning-text: #F67E2E;        /* Alert */

    /* Feedbacks — Error (Danger) */
    --vbx-color-danger: #AA0000;              /* Error */
    --vbx-color-danger-light: #FFD3D3;        /* Error Light */

    /* Feedbacks — Neutral (Info) */
    --vbx-color-neutral: #0030A6;             /* Neutral */
    --vbx-color-neutral-light: #E6F2FD;       /* Neutral Light */

    /* Feedbacks — Positive (Success) */
    --vbx-color-success-bg: #D4F5E9;          /* Positive Light */
    --vbx-color-success-border: #A7F3D0;
    --vbx-color-success-text: #007758;        /* Positive */

    /* ------------------------------------------------------------------
       2. TYPOGRAPHIE
    ------------------------------------------------------------------ */

    --vbx-font-family: "Public Sans", system-ui, sans-serif;

    /* Tailles */
    --vbx-font-size-xs: 12px;
    --vbx-font-size-sm: 13px;   /* Body 2 */
    --vbx-font-size-md: 14px;   /* Button, Error, Helper */
    --vbx-font-size-label: 15px; /* Label */
    --vbx-font-size-base: 16px; /* Body 1, Input, Placeholder */
    --vbx-font-size-lg: 18px;   /* H4, Sub 1 */
    --vbx-font-size-xl: 20px;   /* H3 */
    --vbx-font-size-2xl: 27px;  /* H2 */
    --vbx-font-size-h1: 32px;   /* H1 */

    /* Graisses */
    --vbx-font-weight-light: 300;
    --vbx-font-weight-normal: 400;
    --vbx-font-weight-medium: 500;
    --vbx-font-weight-semibold: 600;
    --vbx-font-weight-bold: 700;

    /* Interlignes */
    --vbx-line-height-body: 1.5;       /* 16px * 1.5 = 24px — Body1, Body1 Bold, Body1 Medium */
    --vbx-line-height-body2: 1.538;    /* 13px * 1.538 = ~20px — Body2, Body2 Bold */
    --vbx-line-height-h1: 36px;        /* H1 */
    --vbx-line-height-h2: 32px;        /* H2 */
    --vbx-line-height-h3: 24px;        /* H3, H4, Sub1, Button, Input */
    --vbx-line-height-tight: 22px;     /* Body1 Light (300) */
    --vbx-line-height-ui: 24px;        /* Alias de h3 — conservé pour compatibilité */
    --vbx-line-height-label: 20px;     /* Label, Placeholder, Error, Helper */

    /* Letter spacing */
    --vbx-letter-spacing-btn: 0.1px;   /* Button — design system officiel */

    /* ------------------------------------------------------------------
       3. ESPACEMENTS
       Règle : multiples de 5px — design system officiel VBX
    ------------------------------------------------------------------ */

    --vbx-space-xs:  5px;
    --vbx-space-btn: 10px;  /* Espacement entre boutons — valeur fixée par le design system. */
    --vbx-space-sm:  10px;  /* Espacement small — usage général, peut évoluer indépendamment. */
    --vbx-space-md:  15px;
    --vbx-space-lg:  20px;
    --vbx-space-xl:  25px;
    --vbx-space-2xl: 30px;
    --vbx-space-3xl: 40px;
    --vbx-space-4xl: 50px;

    /* ------------------------------------------------------------------
       4. BORDER RADIUS
    ------------------------------------------------------------------ */

    --vbx-radius-btn: 6px;     /* Boutons — design system officiel */
    --vbx-radius-sm: 5px;      /* Images, petits éléments */
    --vbx-radius-md: 10px;     /* Cards, inputs, modals */
    --vbx-radius-lg: 15px;     /* Panels larges */
    --vbx-radius-round: 999px; /* Pills, avatars */

    /* ------------------------------------------------------------------
       5. OMBRES
    ------------------------------------------------------------------ */

    --vbx-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.10);
    --vbx-shadow-md: 0 4px 21px rgba(0, 0, 0, 0.10);
    --vbx-shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.15);

    /* ------------------------------------------------------------------
       6. TRANSITIONS
    ------------------------------------------------------------------ */

    --vbx-transition: 160ms ease;

    /* ------------------------------------------------------------------
       7. Z-INDEX
    ------------------------------------------------------------------ */

    --vbx-z-dropdown: 100;
    --vbx-z-overlay: 500;
    --vbx-z-modal-backdrop: 1000;
    --vbx-z-modal: 1010;
    --vbx-z-toast: 2000;
}

/*
   ==================================================================
   8. BREAKPOINTS
   ==================================================================

   Alignées sur les standards 2026 (Tailwind v4, Bootstrap 5) :

   Mobile        : max-width: 768px
   Tablette      : 769px – 1024px
   Desktop       : min-width: 1025px
   Desktop large : min-width: 1280px

   ------------------------------------------------------------------
   MEDIA QUERIES STANDARD — copier-coller dans les fichiers CSS :
   ------------------------------------------------------------------

   Mobile uniquement :
   @media (max-width: 768px) { }

   Tablette uniquement :
   @media (min-width: 769px) and (max-width: 1024px) { }

   Mobile + Tablette (= -touch, tout sauf desktop) :
   @media (max-width: 1024px) { }

   Desktop large uniquement :
   @media (min-width: 1280px) { }

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