/**
 * ============================================================
 * PROPARO - DESIGN TOKENS
 * Agence Influa - Jerome Libes - j.libes@influa.com
 * Version 1.0 - Mars 2026
 *
 * Ce fichier est la source de verite unique pour tous les
 * tokens visuels du projet Proparo / PrestaShop 8.
 * Il est importe en premier dans le theme PS8 et dans
 * chaque module custom Influa.
 *
 * NE PAS MODIFIER les valeurs sans valider avec l'agence.
 * Toute modification doit etre repercutee dans :
 *   - /themes/proparo/assets/css/_tokens.css (ce fichier)
 *   - /themes/proparo/assets/js/tokens.json (export auto)
 *   - Le systeme de design Figma Proparo
 * ============================================================
 */

:root {

  /* --------------------------------------
     COULEURS - MARQUE
  -------------------------------------- */

  /* Rouge Proparo - couleur principale de marque
     Source : logo vectoriel Proparo (SVG)
     Utilisation : CTA primaires, accents, liens actifs, badges */
  --color-brand:          #D40012;
  --color-brand-dark:     #B5000F;   /* Hover etat sur fond clair */
  --color-brand-light:    #FFF0F1;   /* Fond teinte, badges, highlights */
  --color-brand-shadow:   0 8px 28px rgba(212, 0, 18, .22);

  /* Bleu Pro - espace professionnel B2B uniquement
     Utilisation : hero Espace Pro, badges Pro, accents B2B */
  --color-pro:            #1A3A5C;
  --color-pro-light:      #EEF3FA;

  /* Or - programme fidelite
     Utilisation : palier Gold, points, recompenses */
  --color-gold:           #C9973A;
  --color-gold-light:     #FDF5E8;

  /* Argent - palier Silver fidelite */
  --color-silver:         #7A8A9A;
  --color-silver-light:   #F0F3F6;

  /* Platine - palier Platinum fidelite */
  --color-platinum:       #6B5E8A;
  --color-platinum-light: #F5F2FC;

  /* --------------------------------------
     COULEURS - NEUTRALES
  -------------------------------------- */

  --color-ink:            #141412;   /* Titres, texte principal lourd */
  --color-ink-mid:        #2E2E2C;   /* Corps de texte standard */
  --color-ink-mute:       #6B6B66;   /* Texte secondaire, labels */
  --color-ink-hint:       #9A9A94;   /* Placeholders, metadonnees */

  --color-canvas:         #FFFFFF;   /* Fond blanc pur - cards, panneaux */
  --color-canvas-warm:    #F8F7F4;   /* Fond legerement chaud - page background */
  --color-canvas-deep:    #F0EFE8;   /* Fond profond - sections alternees */

  --color-border:         #E8E8E2;   /* Bordures legeres */
  --color-border-mid:     #D0CFCA;   /* Bordures moyennes - inputs */

  /* --------------------------------------
     COULEURS - ETAT
  -------------------------------------- */

  --color-success:        #2D8A4E;
  --color-success-bg:     #EEF9F2;
  --color-success-border: rgba(45, 138, 78, .2);

  --color-alert:          #E87A2A;
  --color-alert-bg:       #FFF6EE;

  --color-error:          #D40012;   /* Meme que brand - coherence formulaires */
  --color-error-bg:       #FFF0F1;

  --color-stars:          #F5A623;   /* Notation produits */

  /* --------------------------------------
     TYPOGRAPHIE - FAMILLES
  -------------------------------------- */

  /* Display / Titres - Playfair Display
     Google Fonts : https://fonts.google.com/specimen/Playfair+Display
     Utilise pour : H1, H2, H3, logos, citations, nombres cles
     Poids utilises : 400 (italic), 600, 700, 800 */
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;

  /* Body / Interface - DM Sans
     Google Fonts : https://fonts.google.com/specimen/DM+Sans
     Utilise pour : corps de texte, boutons, labels, navigation
     Poids utilises : 300, 400, 500, 600, 700
     Optical size range : 9..40 */
  --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

  /* --------------------------------------
     TYPOGRAPHIE - ECHELLE (px / rem)
  -------------------------------------- */

  --text-xs:    10px;   /* Tags, badges, meta mineurs */
  --text-sm:    12px;   /* Legendes, labels de champ */
  --text-base:  14px;   /* Corps secondaire */
  --text-md:    15px;   /* Corps principal PS8 */
  --text-lg:    17px;   /* Corps etendu, introductions */
  --text-xl:    20px;   /* Sous-titres, prix */
  --text-2xl:   24px;   /* Titres de section */
  --text-3xl:   32px;   /* H2 pages */
  --text-4xl:   42px;   /* H1 pages */
  --text-5xl:   56px;   /* H1 hero */
  --text-display: clamp(32px, 5vw, 72px);  /* Grands titres fluides */

  /* --------------------------------------
     TYPOGRAPHIE - POIDS
  -------------------------------------- */

  --weight-light:     300;
  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 800;

  /* --------------------------------------
     TYPOGRAPHIE - LINE-HEIGHT
  -------------------------------------- */

  --leading-tight:    1.1;   /* Titres display */
  --leading-snug:     1.25;  /* Titres standard */
  --leading-normal:   1.5;   /* Corps compact */
  --leading-relaxed:  1.7;   /* Corps standard */
  --leading-loose:    1.85;  /* Corps large, accessibilite */

  /* --------------------------------------
     TYPOGRAPHIE - LETTER-SPACING
  -------------------------------------- */

  --tracking-tighter: -.04em;   /* Grands titres display */
  --tracking-tight:   -.02em;   /* Titres standard */
  --tracking-normal:   0;
  --tracking-wide:     .04em;   /* Labels, sous-titres */
  --tracking-wider:    .08em;   /* Badges, tags */
  --tracking-widest:   .12em;   /* Eyebrows en uppercase */

  /* --------------------------------------
     ESPACEMENT - ECHELLE (4px base)
  -------------------------------------- */

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

  /* --------------------------------------
     BORDER-RADIUS
  -------------------------------------- */

  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-xl:   32px;
  --radius-pill: 999px;   /* Boutons arrondis, chips */

  /* --------------------------------------
     OMBRES
  -------------------------------------- */

  --shadow-xs:  0 1px 4px rgba(0, 0, 0, .05);
  --shadow-sm:  0 2px 10px rgba(0, 0, 0, .07), 0 1px 3px rgba(0, 0, 0, .04);
  --shadow-md:  0 6px 24px rgba(0, 0, 0, .09), 0 2px 8px rgba(0, 0, 0, .05);
  --shadow-lg:  0 16px 56px rgba(0, 0, 0, .11), 0 4px 16px rgba(0, 0, 0, .06);
  --shadow-xl:  0 32px 80px rgba(0, 0, 0, .14), 0 8px 24px rgba(0, 0, 0, .08);

  /* --------------------------------------
     TRANSITIONS / ANIMATIONS
  -------------------------------------- */

  --ease-default:   cubic-bezier(.4, 0, .2, 1);    /* Material Design standard */
  --ease-in:        cubic-bezier(.4, 0, 1, 1);
  --ease-out:       cubic-bezier(0, 0, .2, 1);
  --ease-spring:    cubic-bezier(.34, 1.56, .64, 1); /* Legere elasticite */
  --ease-bounce:    cubic-bezier(.68, -.6, .32, 1.6);

  --duration-fast:   120ms;
  --duration-base:   200ms;
  --duration-slow:   350ms;
  --duration-slower: 550ms;

  /* --------------------------------------
     LAYOUT - GRILLE ET CONTENEURS
  -------------------------------------- */

  --container-max:   1280px;   /* Largeur maximale du conteneur */
  --container-pad:   40px;     /* Padding horizontal (desktop) */
  --container-pad-mobile: 24px; /* Padding horizontal (mobile) */

  --grid-gap:        24px;     /* Gap standard entre colonnes */
  --grid-gap-sm:     16px;
  --grid-gap-lg:     32px;

  /* --------------------------------------
     COMPOSANTS - HEADER
  -------------------------------------- */

  --header-height:         80px;
  --header-bg:             rgba(255, 255, 255, .93);
  --header-backdrop:       blur(16px);
  --header-border-scrolled: var(--color-border);
  --header-shadow-scrolled: var(--shadow-sm);
  --header-z:              200;

  /* --------------------------------------
     COMPOSANTS - BOUTONS
  -------------------------------------- */

  /* Primaire */
  --btn-primary-bg:         var(--color-brand);
  --btn-primary-bg-hover:   var(--color-brand-dark);
  --btn-primary-color:      #FFFFFF;
  --btn-primary-shadow:     var(--color-brand-shadow);
  --btn-primary-radius:     var(--radius-pill);
  --btn-primary-height:     52px;
  --btn-primary-pad:        0 28px;
  --btn-primary-font-size:  14px;
  --btn-primary-weight:     700;

  /* Secondaire */
  --btn-secondary-bg:       transparent;
  --btn-secondary-bg-hover: var(--color-canvas-warm);
  --btn-secondary-color:    var(--color-ink-mid);
  --btn-secondary-border:   1.5px solid var(--color-border-mid);
  --btn-secondary-border-hover: 1.5px solid var(--color-ink);
  --btn-secondary-radius:   var(--radius-pill);
  --btn-secondary-height:   48px;
  --btn-secondary-pad:      0 24px;
  --btn-secondary-font-size: 13px;
  --btn-secondary-weight:   600;

  /* Ghost (sur fond sombre) */
  --btn-ghost-color:        rgba(255, 255, 255, .6);
  --btn-ghost-border:       1.5px solid rgba(255, 255, 255, .15);
  --btn-ghost-border-hover: 1.5px solid rgba(255, 255, 255, .4);
  --btn-ghost-color-hover:  #FFFFFF;

  /* --------------------------------------
     COMPOSANTS - INPUTS / FORMULAIRES
  -------------------------------------- */

  --input-height:         52px;
  --input-pad:            20px 16px 8px;   /* Floating label */
  --input-font-size:      15px;
  --input-color:          var(--color-ink);
  --input-bg:             var(--color-canvas);
  --input-bg-focus:       var(--color-canvas);
  --input-border:         1.5px solid var(--color-border-mid);
  --input-border-focus:   1.5px solid var(--color-brand);
  --input-shadow-focus:   0 0 0 3px rgba(212, 0, 18, .08);
  --input-radius:         var(--radius-md);
  --input-placeholder:    var(--color-ink-hint);

  --label-float-top:      10px;
  --label-float-size:     10px;
  --label-float-weight:   600;
  --label-float-color:    var(--color-brand);
  --label-float-tracking: .06em;

  /* --------------------------------------
     COMPOSANTS - CARDS
  -------------------------------------- */

  --card-bg:       var(--color-canvas);
  --card-border:   1px solid var(--color-border);
  --card-radius:   var(--radius-xl);
  --card-shadow:   var(--shadow-sm);
  --card-shadow-hover: var(--shadow-lg);
  --card-transform-hover: translateY(-4px);

  /* --------------------------------------
     COMPOSANTS - BADGES
  -------------------------------------- */

  --badge-font-size:  10px;
  --badge-weight:     700;
  --badge-pad:        3px 8px;
  --badge-radius:     var(--radius-pill);
  --badge-tracking:   .04em;

  /* --------------------------------------
     ICONES SVG - STANDARDS
  -------------------------------------- */

  --icon-stroke-width:  1.75px;   /* Stroke standard */
  --icon-stroke-round:  round;    /* stroke-linecap + stroke-linejoin */
  --icon-size-sm:       14px;
  --icon-size-md:       18px;
  --icon-size-lg:       24px;

  /* --------------------------------------
     BREAKPOINTS - REFERENCE (CSS custom
     properties ne peuvent pas etre
     utilisees dans les media queries,
     documenter ici pour reference)
  -------------------------------------- */
  /* --bp-sm:  480px  */
  /* --bp-md:  768px  */
  /* --bp-lg:  1024px */
  /* --bp-xl:  1280px */

  /* --------------------------------------
     Z-INDEX - ECHELLE
  -------------------------------------- */

  --z-base:      0;
  --z-raised:    10;
  --z-dropdown:  50;
  --z-sticky:    100;
  --z-fixed:     150;
  --z-header:    200;
  --z-modal:     300;
  --z-toast:     400;

}

/* --------------------------------------
   ALIASES - RETROCOMPATIBILITE
   (anciens noms utilises dans les
   maquettes HTML - mappes vers tokens)
-------------------------------------- */
:root {
  --brand:        var(--color-brand);
  --brand-dk:     var(--color-brand-dark);
  --brand-light:  var(--color-brand-light);
  --brand-sh:     var(--color-brand-shadow);
  --pro:          var(--color-pro);
  --pro-light:    var(--color-pro-light);
  --ink:          var(--color-ink);
  --ink-mid:      var(--color-ink-mid);
  --ink-mute:     var(--color-ink-mute);
  --ink-hint:     var(--color-ink-hint);
  --canvas:       var(--color-canvas);
  --canvas-warm:  var(--color-canvas-warm);
  --canvas-deep:  var(--color-canvas-deep);
  --border:       var(--color-border);
  --border-mid:   var(--color-border-mid);
  --success:      var(--color-success);
  --success-bg:   var(--color-success-bg);
  --stars:        var(--color-stars);
  --r-sm:         var(--radius-sm);
  --r-md:         var(--radius-md);
  --r-lg:         var(--radius-lg);
  --r-xl:         var(--radius-xl);
  --r-pill:       var(--radius-pill);
  --sh-xs:        var(--shadow-xs);
  --sh-sm:        var(--shadow-sm);
  --sh-md:        var(--shadow-md);
  --sh-lg:        var(--shadow-lg);
  --ease:         var(--ease-default);
  --font-d:       var(--font-display);
  --font-b:       var(--font-body);
}