/**
 * Vêt'Chic Design Tokens — Source of Truth
 * Tous les composants et templates doivent référencer ces variables.
 * Ne jamais écrire de valeur brute de couleur, taille ou espacement
 * sans l'ajouter d'abord ici.
 *
 * @package LuxeFriperieChild
 * @version 2.0.0
 */

:root {

    /* =========================================================
       COULEURS — PALETTE CANONIQUE
       ========================================================= */

    /* Brand Gold */
    --color-gold:          #D4AF37;
    --color-gold-light:    #F4E4BC;
    --color-gold-dark:     #A8860A;

    /* Neutrals */
    --color-black:         #0A0A0A;
    --color-off-black:     #1A1A1A;
    --color-white:         #FFFFFF;
    --color-gray-100:      #F8F9FA;
    --color-gray-200:      #EFEFEF;
    --color-gray-400:      #CCCCCC;
    --color-gray-600:      #6C757D;
    --color-gray-800:      #3D3D3D;

    /* Semantic */
    --color-error:         #C0392B;
    --color-error-bg:      #FDECEA;
    --color-success:       #27AE60;
    --color-success-bg:    #EAFAF1;
    --color-warning:       #E67E22;
    --color-warning-bg:    #FEF9E7;
    --color-info:          #2980B9;
    --color-info-bg:       #EBF5FB;

    /* Aliases rétrocompatibles (conservés pour l'existant) */
    --luxe-gold:           var(--color-gold);
    --luxe-gold-light:     var(--color-gold-light);
    --luxe-black:          var(--color-black);
    --luxe-white:          var(--color-white);
    --luxe-gray:           var(--color-gray-600);
    --luxe-gray-light:     var(--color-gray-100);
    --luxe-gray-medium:    var(--color-gray-400);
    --luxe-gray-dark:      var(--color-gray-800);
    --luxe-accent:         var(--color-off-black);


    /* =========================================================
       TYPOGRAPHIE
       ========================================================= */

    --font-primary:   'Playfair Display', Georgia, serif;
    --font-secondary: 'Inter', system-ui, -apple-system, sans-serif;
    --font-body:      var(--font-secondary);
    --font-display:   'The Ambient Stream', var(--font-primary);

    /* Scale (rem, base 16px) */
    --text-xs:   0.75rem;    /* 12px — badges, micro-labels */
    --text-sm:   0.875rem;   /* 14px — labels, descriptions secondaires */
    --text-base: 1rem;       /* 16px — corps de texte, prix */
    --text-lg:   1.125rem;   /* 18px — sous-titres */
    --text-xl:   1.25rem;    /* 20px — titre section mobile */
    --text-2xl:  1.5rem;     /* 24px — titre section desktop */
    --text-3xl:  2rem;       /* 32px — H2 page produit */
    --text-4xl:  2.5rem;     /* 40px — H1 hero */
    --text-5xl:  3.5rem;     /* 56px — logo display */

    /* Line heights */
    --leading-tight:   1.2;
    --leading-normal:  1.5;
    --leading-relaxed: 1.7;

    /* Letter spacing */
    --tracking-heading:   0.02em;
    --tracking-ui:        0em;
    --tracking-uppercase: 0.08em;

    /* Weights */
    --font-light:      300;
    --font-regular:    400;
    --font-medium:     500;
    --font-semibold:   600;
    --font-bold:       700;


    /* =========================================================
       ESPACEMENTS — ÉCHELLE 8PT
       ========================================================= */

    --space-1:   4px;
    --space-2:   8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  20px;
    --space-6:  24px;
    --space-8:  32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;

    /* Aliases rétrocompatibles */
    --spacing-sm:  var(--space-3);
    --spacing-md:  var(--space-4);
    --spacing-lg:  var(--space-6);
    --spacing-xl:  var(--space-10);


    /* =========================================================
       BORDER RADIUS
       ========================================================= */

    --radius-xs:   2px;
    --radius-sm:   4px;
    --radius-md:   8px;
    --radius-lg:  12px;
    --radius-xl:  16px;
    --radius-full: 9999px;  /* pills, avatars, loader rings UNIQUEMENT */


    /* =========================================================
       OMBRES
       ========================================================= */

    --shadow-xs:   0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-sm:   0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-md:   0 4px 16px rgba(0, 0, 0, 0.12);
    --shadow-lg:   0 8px 32px rgba(0, 0, 0, 0.16);
    --shadow-xl:   0 16px 48px rgba(0, 0, 0, 0.24);
    --shadow-gold: 0 4px 20px rgba(212, 175, 55, 0.25);

    /* Aliases rétrocompatibles */
    --shadow-light:  var(--shadow-sm);
    --shadow-medium: var(--shadow-md);
    --shadow-heavy:  var(--shadow-lg);


    /* =========================================================
       ANIMATIONS
       ========================================================= */

    --duration-fast:   150ms;
    --duration-normal: 250ms;
    --duration-slow:   350ms;
    --duration-xslow:  500ms;

    --ease-out:   cubic-bezier(0.0, 0, 0.2, 1);
    --ease-in:    cubic-bezier(0.4, 0, 1, 1);
    --ease-inout: cubic-bezier(0.4, 0, 0.2, 1);


    /* =========================================================
       Z-INDEX — HIÉRARCHIE DOCUMENTÉE
       ========================================================= */

    --z-below:        -1;    /* éléments derrière le fond */
    --z-base:          0;
    --z-raised:        1;    /* éléments relatifs */
    --z-decorative:  200;    /* icônes fixes décoratives (social, homepage only) */
    --z-sticky:      900;    /* éléments sticky (bottom nav mobile = 900) */
    --z-sticky-1:    901;    /* product actions bar mobile */
    --z-sticky-2:    902;    /* header sticky scroll */
    --z-sticky-3:    903;    /* éléments au-dessus du sticky header */
    --z-overlay:    1010;    /* overlay/backdrop de drawers et modales */
    --z-drawer:     1011;    /* panneau latéral (menu, panier) */
    --z-search:     1012;    /* barre de recherche */
    --z-top-icons:  1013;    /* icônes header (panier, user, search) */
    --z-menu-ext:   1014;    /* menus additionnels (adj-dynamic-menu) */
    --z-modal:      1020;    /* modales fullscreen (dialog natif) */
    --z-toast:      1030;    /* notifications toast */


    /* =========================================================
       BREAKPOINTS (référence, non utilisables dans CSS pur)
       Utiliser avec min-width en mobile-first.
       375px / 768px / 1024px / 1280px / 1440px
       ========================================================= */


    /* =========================================================
       COMPOSANTS — BOUTONS
       ========================================================= */

    --btn-height-sm:  32px;
    --btn-height-md:  40px;
    --btn-height-lg:  48px;
    --btn-height-xl:  56px;

    --btn-px-sm:  var(--space-3);
    --btn-px-md:  var(--space-4);
    --btn-px-lg:  var(--space-6);
    --btn-px-xl:  var(--space-8);


    /* =========================================================
       COMPOSANTS — INPUTS
       ========================================================= */

    --input-height:          44px;  /* min touch target WCAG */
    --input-border-rest:     1px solid var(--color-gray-200);
    --input-border-focus:    2px solid var(--color-gold);
    --input-border-error:    1px solid var(--color-error);
    --input-bg-rest:         var(--color-gray-100);
    --input-bg-focus:        var(--color-white);
    --input-radius:          var(--radius-sm);
    --input-font:            var(--font-secondary);
    --input-color:           var(--color-gray-800);
    --input-placeholder:     var(--color-gray-400);


    /* =========================================================
       COMPOSANTS — CARTES PRODUIT
       ========================================================= */

    --card-radius:           var(--radius-md);
    --card-shadow-rest:      var(--shadow-sm);
    --card-shadow-hover:     var(--shadow-md);
    --card-image-ratio:      4 / 5;      /* portrait luxe — ne pas modifier */
    --card-transition:       transform var(--duration-normal) var(--ease-out),
                             box-shadow var(--duration-normal) var(--ease-out);

}


/* =========================================================
   BASE STYLES — BOUTONS
   ========================================================= */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    font-family: var(--font-secondary);
    font-weight: var(--font-semibold);
    font-size: var(--text-base);
    line-height: 1;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    text-decoration: none;
    transition: background var(--duration-normal) var(--ease-out),
                box-shadow var(--duration-normal) var(--ease-out),
                transform var(--duration-fast) var(--ease-out);
    -webkit-user-select: none;
    user-select: none;
    white-space: nowrap;
}

/* Focus visible — WCAG AA */
.btn:focus-visible {
    outline: 2px solid var(--color-gold);
    outline-offset: 2px;
}

/* Active press */
.btn:active:not(:disabled) {
    transform: scale(0.98);
}

/* Disabled */
.btn:disabled,
.btn[aria-disabled="true"] {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

/* Loading */
.btn[aria-busy="true"] {
    position: relative;
    cursor: wait;
}

/* Sizes */
.btn--sm { height: var(--btn-height-sm); padding: 0 var(--btn-px-sm); font-size: var(--text-sm); }
.btn--md { height: var(--btn-height-md); padding: 0 var(--btn-px-md); }
.btn--lg { height: var(--btn-height-lg); padding: 0 var(--btn-px-lg); font-size: var(--text-lg); }
.btn--xl { height: var(--btn-height-xl); padding: 0 var(--btn-px-xl); font-size: var(--text-xl); }

/* Primary */
.btn--primary {
    background: var(--color-gold);
    color: var(--color-white);
}
.btn--primary:hover:not(:disabled) {
    background: var(--color-gold-dark);
    box-shadow: var(--shadow-gold);
}

/* Secondary */
.btn--secondary {
    background: var(--color-white);
    border: 1.5px solid var(--color-gold);
    color: var(--color-gold-dark);
}
.btn--secondary:hover:not(:disabled) {
    background: var(--color-gold-light);
}

/* Ghost */
.btn--ghost {
    background: transparent;
    color: var(--color-black);
}
.btn--ghost:hover:not(:disabled) {
    background: var(--color-gray-100);
}

/* Destructive */
.btn--destructive {
    background: var(--color-error);
    color: var(--color-white);
}
.btn--destructive:hover:not(:disabled) {
    background: #A93226;
}

/* Full width */
.btn--full { width: 100%; }

/* Spinner inline */
.btn__spinner {
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: var(--radius-full);
    animation: btn-spin 0.6s linear infinite;
    flex-shrink: 0;
}
@keyframes btn-spin {
    to { transform: rotate(360deg); }
}


/* =========================================================
   BASE STYLES — INPUTS & FORMULAIRES
   ========================================================= */

.form-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.form-label {
    font-family: var(--font-secondary);
    font-weight: var(--font-medium);
    font-size: var(--text-sm);
    color: var(--color-black);
    letter-spacing: var(--tracking-ui);
}

.form-label--required::after {
    content: ' *';
    color: var(--color-error);
}

.form-input,
.form-textarea,
.form-select {
    height: var(--input-height);
    width: 100%;
    padding: 0 var(--space-3);
    font-family: var(--input-font);
    font-size: var(--text-base);
    color: var(--input-color);
    background: var(--input-bg-rest);
    border: var(--input-border-rest);
    border-radius: var(--input-radius);
    transition: border var(--duration-fast) var(--ease-out),
                background var(--duration-fast) var(--ease-out);
    appearance: none;
}

.form-textarea {
    height: auto;
    min-height: 96px;
    padding: var(--space-3);
    resize: vertical;
}

.form-input::placeholder,
.form-textarea::placeholder {
    color: var(--input-placeholder);
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
    outline: none;
    border: var(--input-border-focus);
    background: var(--input-bg-focus);
}

.form-input--error,
.form-textarea--error {
    border: var(--input-border-error);
}

.form-error {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-xs);
    color: var(--color-error);
    margin-top: var(--space-1);
}


/* =========================================================
   BASE STYLES — BADGES
   ========================================================= */

.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    font-family: var(--font-secondary);
    font-weight: var(--font-medium);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-uppercase);
    text-transform: uppercase;
    border-radius: var(--radius-xs);
    line-height: 1;
    white-space: nowrap;
}

.badge--gold    { background: var(--color-gold);       color: var(--color-white); }
.badge--outline { background: transparent; border: 1px solid var(--color-gold); color: var(--color-gold-dark); }
.badge--gray    { background: var(--color-gray-200);   color: var(--color-gray-800); }
.badge--success { background: var(--color-success-bg); color: var(--color-success); }
.badge--error   { background: var(--color-error-bg);   color: var(--color-error); }
.badge--warning { background: var(--color-warning-bg); color: var(--color-warning); }

/* Condition produit */
.badge--neuf  { background: var(--color-gold);       color: var(--color-white); }
.badge--tbe   { background: var(--color-success-bg); color: var(--color-success); }
.badge--be    { background: var(--color-gray-200);   color: var(--color-gray-800); }
.badge--tb    { background: var(--color-info-bg);    color: var(--color-info); }


/* =========================================================
   BASE STYLES — CARTES PRODUIT
   ========================================================= */

.product-card {
    position: relative;
    border-radius: var(--card-radius);
    overflow: hidden;
    background: var(--color-white);
    box-shadow: var(--card-shadow-rest);
    transition: var(--card-transition);
}

.product-card:hover {
    box-shadow: var(--card-shadow-hover);
    transform: translateY(-2px);
}

.product-card__image-wrapper {
    aspect-ratio: var(--card-image-ratio);
    overflow: hidden;
    background: var(--color-gray-100);
}

.product-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--duration-slow) var(--ease-out);
}

.product-card:hover .product-card__image {
    transform: scale(1.03);
}

.product-card__badges {
    position: absolute;
    top: var(--space-3);
    left: var(--space-3);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.product-card__condition {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
}

.product-card__body {
    padding: var(--space-3) var(--space-4) var(--space-4);
}

.product-card__name {
    font-family: var(--font-secondary);
    font-weight: var(--font-medium);
    font-size: var(--text-sm);
    color: var(--color-gray-800);
    margin-bottom: var(--space-1);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.product-card__price {
    font-family: var(--font-primary);
    font-weight: var(--font-semibold);
    font-size: var(--text-xl);
    color: var(--color-black);
}

.product-card__price-original {
    font-family: var(--font-secondary);
    font-weight: var(--font-regular);
    font-size: var(--text-sm);
    color: var(--color-gray-600);
    text-decoration: line-through;
    margin-left: var(--space-2);
}

/* Sold out overlay */
.product-card--sold-out .product-card__image-wrapper::after {
    content: 'Épuisé';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.75);
    font-family: var(--font-secondary);
    font-weight: var(--font-semibold);
    font-size: var(--text-lg);
    color: var(--color-gray-800);
    letter-spacing: var(--tracking-uppercase);
    text-transform: uppercase;
}


/* =========================================================
   BASE STYLES — TRUST LAYER (CHECKOUT)
   ========================================================= */

.trust-signals {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    align-items: center;
    padding: var(--space-4);
    background: var(--color-gray-100);
    border-radius: var(--radius-md);
    margin-top: var(--space-4);
}

.trust-signal {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-secondary);
    font-size: var(--text-xs);
    color: var(--color-gray-600);
}

.trust-signal__icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--color-success);
}


/* =========================================================
   ACCESSIBILITÉ — GLOBALE
   ========================================================= */

/* Skip link */
.skip-link {
    position: absolute;
    top: -100%;
    left: var(--space-4);
    z-index: var(--z-toast);
    padding: var(--space-2) var(--space-4);
    background: var(--color-gold);
    color: var(--color-white);
    font-weight: var(--font-semibold);
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: top var(--duration-fast);
}
.skip-link:focus {
    top: var(--space-4);
}

/* Focus visible global (éléments sans classe .btn) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--color-gold);
    outline-offset: 2px;
}

/* Supprimer outline sur souris (conserver pour clavier) */
:focus:not(:focus-visible) {
    outline: none;
}