/*
 * TUSSOR — Design Tokens
 * Variables CSS extraites de la charte graphique (docs/CHARTE-GRAPHIQUE.md).
 * Importer ce fichier en TOUT PREMIER dans app.js (avant Bootstrap et les autres styles)
 * pour pouvoir utiliser les variables --t-* dans tous les composants.
 */

:root {

    /* ============================================================
     * 1. COULEURS — Brand
     * ============================================================ */

    --t-color-red:              #DB021D;   /* Rouge TUSSOR (signature, 42 occurrences) */
    --t-color-red-light:        #F32D2D;   /* Variante claire */
    --t-color-red-dark:         #c40118;   /* Variante foncée */
    --t-color-red-deep:         #a50101;   /* Variante très sombre */
    --t-color-red-shadow:       rgba(219, 2, 29, 0.33);

    --t-color-black:            #000000;
    --t-color-white:            #FFFFFF;

    /* ============================================================
     * 2. COULEURS — Échelle de gris (du plus sombre au plus clair)
     * ============================================================ */

    --t-gray-900:               #0a0a0a;   /* Texte très foncé */
    --t-gray-800:               #1a1a1a;
    --t-gray-700:               #202020;   /* Liens navbar */
    --t-gray-600:               #212529;   /* Texte titres détail (Bootstrap body) */
    --t-gray-500:               #333333;   /* Bordures icônes */
    --t-gray-400:               #515151;
    --t-gray-300:               #777777;   /* Texte produit grisé */
    --t-gray-250:               #8F8F8F;   /* Filtres inactifs */
    --t-gray-200:               #a5a5a5;
    --t-gray-150:               #ced4da;   /* Inputs (Bootstrap) */
    --t-gray-100:               #dee2e6;   /* Bordures (Bootstrap) */
    --t-gray-75:                #e1e1e1;
    --t-gray-50:                #EDEEF0;   /* Fonds blocs */
    --t-gray-25:                #f1f5f9;   /* Surface très claire */

    /* Mots-clés CSS conservés tels quels pour cohérence avec le legacy */
    --t-color-dimgrey:          dimgrey;   /* Liens footer */
    --t-color-gray:             gray;      /* Attributs produit */

    /* ============================================================
     * 3. COULEURS — Sémantique
     * ============================================================ */

    --t-color-primary:          var(--t-color-black);
    --t-color-primary-hover:    var(--t-color-red);
    --t-color-accent:           var(--t-color-red);

    --t-color-success:          green;
    --t-color-danger:           var(--t-color-red);
    --t-color-error:            var(--t-color-red);

    --t-color-text:             var(--t-color-gray-600);
    --t-color-text-muted:       var(--t-gray-300);
    --t-color-text-inverse:     var(--t-color-white);
    --t-color-link:             var(--t-color-black);
    --t-color-link-hover:       var(--t-color-red);

    --t-color-bg:               var(--t-color-white);
    --t-color-bg-subtle:        rgba(0, 0, 0, 0.015);  /* Fond footer */
    --t-color-bg-muted:         var(--t-gray-50);      /* Blocs tri, descriptions */

    --t-color-border:           var(--t-gray-100);
    --t-color-border-subtle:    rgba(0, 0, 0, 0.05);   /* Bordure navbar */
    --t-color-border-strong:    var(--t-color-black);

    --t-color-overlay-soft:     rgba(0, 0, 0, 0.05);
    --t-color-overlay-medium:   rgba(0, 0, 0, 0.08);   /* Hover liste couleurs */
    --t-color-overlay-strong:   rgba(0, 0, 0, 0.1);
    --t-color-overlay-dark:     rgba(0, 0, 0, 0.5);
    --t-color-overlay-darker:   rgba(0, 0, 0, 0.8);

    /* ============================================================
     * 4. TYPOGRAPHIE — Familles
     * ============================================================ */

    --t-font-system:
        "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
        "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif,
        "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

    --t-font-base:              var(--t-font-system);
    --t-font-heading:           var(--t-font-system);
    --t-font-ui:                var(--t-font-system);

    /* ============================================================
     * 5. TYPOGRAPHIE — Tailles
     * Hiérarchie tirée de l'audit (12px le plus fréquent, jusqu'à 50px hero)
     * ============================================================ */

    --t-text-9:                 9px;       /* Footer mobile attribut */
    --t-text-10:                10px;      /* Quantité panier */
    --t-text-11:                11px;      /* Modal footer add-to-cart */
    --t-text-xs:                12px;      /* CTA, footer, UI secondaire (18 occurrences) */
    --t-text-sm:                13px;      /* Breadcrumbs, prix barré */
    --t-text-base:              14px;      /* Liens footer, boutons border */
    --t-text-md:                15px;      /* Advert bandeau */
    --t-text-lg:                16px;      /* Body fiche produit */
    --t-text-xl:                17px;      /* Titre produit panier */
    --t-text-2xl:               18px;
    --t-text-3xl:               20px;      /* Sous-titres, prix, modal title */
    --t-text-4xl:               24px;
    --t-text-5xl:               25px;      /* Titres sections shop */
    --t-text-6xl:               26px;      /* H1 fiche produit */
    --t-text-7xl:               32px;      /* H2 sections home */
    --t-text-8xl:               35px;      /* Titres shop */
    --t-text-9xl:               40px;      /* H1 hero mobile */
    --t-text-hero:              50px;      /* H1 hero desktop */

    /* Tailles relatives */
    --t-text-0_7rem:            0.7rem;    /* Categories size */
    --t-text-0_9rem:            0.9rem;    /* Sub-category */
    --t-text-1rem:              1rem;      /* Nav-item */

    /* ============================================================
     * 6. TYPOGRAPHIE — Graisses
     * ============================================================ */

    --t-weight-light:           200;       /* Hero advert, citations */
    --t-weight-extralight:      300;       /* Boutons élégants, descriptions hero */
    --t-weight-regular:         400;       /* Body */
    --t-weight-medium:          500;       /* Sous-titres, accordéons */
    --t-weight-semibold:        600;       /* Prix, sous-catégories (le plus utilisé : 17×) */
    --t-weight-bold:            700;       /* H1, H2, titres footer */

    /* ============================================================
     * 7. TYPOGRAPHIE — Letter-spacing & line-height
     * ============================================================ */

    --t-tracking-normal:        normal;
    --t-tracking-wide:          1px;       /* Signature TUSSOR — 35 occurrences */
    --t-tracking-wider:         2px;       /* Titres importants, modal */

    --t-leading-tight:          1.2;
    --t-leading-snug:           1.4;
    --t-leading-normal:         1.5;
    --t-leading-relaxed:        1.75;
    --t-leading-loose:          30px;      /* Descriptions, réassurance */
    --t-leading-hero:           35px;      /* Hero homepage */

    /* ============================================================
     * 8. ESPACEMENTS
     * ============================================================ */

    --t-space-0:                0;
    --t-space-1:                2px;
    --t-space-2:                5px;
    --t-space-3:                10px;
    --t-space-4:                15px;
    --t-space-5:                20px;      /* Standard de section */
    --t-space-6:                25px;
    --t-space-7:                30px;      /* Espacement vertical sections (récurrent) */
    --t-space-8:                40px;      /* Footer margin-top */
    --t-space-9:                50px;
    --t-space-10:               60px;
    --t-space-12:               80px;
    --t-space-16:               100px;     /* Sections produits liés / vus récemment */

    /* ============================================================
     * 9. RAYONS DE BORDURE
     * ============================================================ */

    --t-radius-none:            0;         /* Signature TUSSOR (10 occurrences explicites) */
    --t-radius-xs:              2px;       /* Boutons cookies */
    --t-radius-sm:              5px;
    --t-radius-md:              6px;       /* Bannière cookies */
    --t-radius-pill:            34px;
    --t-radius-full:            50%;       /* Pastille panier, avatars */

    /* ============================================================
     * 10. BORDURES — Épaisseurs standard
     * ============================================================ */

    --t-border-width-1:         1px;
    --t-border-width-2:         2px;       /* Underline filtres actifs, outline focus */

    /* ============================================================
     * 11. OMBRES
     * ============================================================ */

    --t-shadow-card-inset:      0 0 0 5px rgba(0, 0, 0, 0.1) inset;     /* Carte produit */
    --t-shadow-thumb-focus:     0 0 0 2px #000000;                       /* Miniature galerie */
    --t-shadow-cookie:          0 -1px 10px 0 #acabab4d;                 /* Bannière cookies */
    --t-shadow-soft:            0 1px 3px rgba(0, 0, 0, 0.05);
    --t-shadow-medium:          0 4px 12px rgba(0, 0, 0, 0.08);

    /* ============================================================
     * 12. TRANSITIONS
     * ============================================================ */

    --t-duration-fast:          200ms;     /* Hover liste tailles/couleurs */
    --t-duration-base:          300ms;     /* Hover images, scale */
    --t-duration-md:            400ms;     /* Hover boutons (.4s) */
    --t-duration-slow:          500ms;     /* Sliding add-to-cart, underline animé */

    --t-ease-default:           ease;
    --t-ease-in-out:            ease-in-out;
    --t-ease-out:               ease-out;

    --t-transition-color:       color var(--t-duration-md) var(--t-ease-default),
                                background-color var(--t-duration-md) var(--t-ease-default);
    --t-transition-opacity:     opacity var(--t-duration-slow) var(--t-ease-default);
    --t-transition-transform:   transform var(--t-duration-base) var(--t-ease-default);
    --t-transition-all:         all var(--t-duration-md) var(--t-ease-default);

    /* ============================================================
     * 13. Z-INDEX (échelle harmonisée)
     * ============================================================ */

    --t-z-base:                 1;
    --t-z-dropdown:              10;
    --t-z-fixed:                 20;       /* Bouton add-to-cart mobile (déjà à 10) */
    --t-z-sticky:                30;
    --t-z-modal-backdrop:        40;
    --t-z-modal:                 50;
    --t-z-cookie:               100;       /* Bannière cookies (déjà à 100) */
    --t-z-toast:                200;

    /* ============================================================
     * 14. LAYOUT — Tailles fixes récurrentes
     * ============================================================ */

    --t-logo-header-max:        200px;
    --t-logo-footer-height:     220px;
    --t-modal-cart-width:       650px;
    --t-cookie-width:            400px;
    --t-navbar-padding-x:        4%;

    /* Touch targets a11y (WCAG) */
    --t-touch-min:              44px;

    /* ============================================================
     * 15. BREAKPOINTS — Valeurs de référence
     * (Les variables CSS ne fonctionnent PAS dans @media — utiliser
     *  les valeurs en dur dans les media queries. Ces tokens servent
     *  de documentation et peuvent être lus en JS.)
     * ============================================================ */

    --t-bp-xs:                  414px;     /* Très petit mobile */
    --t-bp-sm:                  576px;     /* Bootstrap sm */
    --t-bp-md:                  720px;     /* Mobile/tablette TUSSOR */
    --t-bp-lg:                  992px;     /* Bascule desktop principale */
    --t-bp-xl:                  1200px;
    --t-bp-2xl:                 1400px;
    --t-bp-3xl:                 1820px;    /* Hero homepage XL */

    /* ============================================================
     * 16. ACCESSIBILITÉ
     * ============================================================ */

    --t-focus-ring-color:       var(--t-color-black);
    --t-focus-ring-width:       2px;
    --t-focus-ring-offset:      2px;
    --t-focus-ring:             var(--t-focus-ring-width) solid var(--t-focus-ring-color);
}

/* ============================================================
 * Reduced motion — désactive les animations longues
 * ============================================================ */
@media (prefers-reduced-motion: reduce) {
    :root {
        --t-duration-fast:      0ms;
        --t-duration-base:      0ms;
        --t-duration-md:        0ms;
        --t-duration-slow:      0ms;
    }
}