/* assets/css/tokens.css
 * Source de vérité unique pour la palette, la typographie et les espacements.
 * Spec : docs/specs/2026-05-26-air-microphones-design.md §3
 */

:root {
  /* Palette globale */
  --c-black:        #0A0A0A;
  --c-off-white:    #FAFAFA;
  --c-neutral-100:  #F4F4F4;
  --c-neutral-300:  #D6D6D6;
  --c-neutral-500:  #8A8A8A;
  --c-neutral-700:  #4A4A4A;
  --c-neutral-900:  #1F1F1F;

  /* Couleurs produit (extraites des packagings) */
  --c-w1:           #1F5F6E;
  --c-w1-deep:      #0E3A45;
  --c-w1-light:     #4A8C9C;

  --c-w2:           #000000;
  --c-w2-accent:    #C5E63B;

  --c-s2:           #1E2B5F;
  --c-s2-deep:      #0F1633;
  --c-s2-light:     #7090D0; /* éclairci de #4A6DA7 pour passer WCAG AA sur fond noir (4.5:1) */

  --c-s3:           #5E4FB8;
  --c-s3-deep:      #3D2F8F;
  --c-s3-light:     #8A7FCC;

  /* Variables thématiques (surchargées par .theme-*) */
  --c-theme:        var(--c-black);
  --c-theme-deep:   var(--c-black);
  --c-theme-light:  var(--c-neutral-700);
  --c-theme-accent: var(--c-off-white);

  /* Typographie */
  --f-sans: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --fs-display-xl:  clamp(3.5rem, 8vw, 7.5rem);
  --fs-display-l:   clamp(2.5rem, 5.5vw, 5rem);
  --fs-h2:          clamp(2rem, 4vw, 3.5rem);
  --fs-h3:          clamp(1.5rem, 2.5vw, 2.25rem);
  --fs-body:        clamp(1rem, 1.2vw, 1.125rem);
  --fs-label:       clamp(0.8125rem, 0.95vw, 0.875rem);
  --fs-caption:     clamp(0.75rem, 0.85vw, 0.8125rem);

  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-bold:     700;
  --fw-black:    900;

  --lh-tight:   0.95;
  --lh-snug:    1.1;
  --lh-base:    1.6;

  --ls-tight:   -0.02em;
  --ls-base:    0;
  --ls-wide:    0.05em;

  /* Espacements (rythme 8px) */
  --sp-0:   0;
  --sp-1:   0.5rem;
  --sp-2:   1rem;
  --sp-3:   1.5rem;
  --sp-4:   2rem;
  --sp-5:   3rem;
  --sp-6:   4rem;
  --sp-7:   6rem;
  --sp-8:   8rem;

  /* Layout */
  --container-max:    1440px;
  --container-pad:    clamp(1rem, 4vw, 5rem);
  --header-h:         64px;
  --radius-sm:        4px;
  --radius-md:        12px;
  --radius-lg:        24px;

  /* Effets */
  --shadow-soft:  0 8px 32px rgba(0, 0, 0, 0.12);
  --shadow-deep:  0 24px 64px rgba(0, 0, 0, 0.24);

  /* Transitions */
  --t-fast:  150ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-base:  300ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-slow:  600ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Thèmes produit */

body.theme-w1 {
  --c-theme:        var(--c-w1);
  --c-theme-deep:   var(--c-w1-deep);
  --c-theme-light:  var(--c-w1-light);
  --c-theme-accent: var(--c-off-white);
}
body.theme-w2 {
  --c-theme:        var(--c-w2);
  --c-theme-deep:   var(--c-w2);
  --c-theme-light:  var(--c-neutral-700);
  --c-theme-accent: var(--c-w2-accent);
}
body.theme-s2 {
  --c-theme:        var(--c-s2);
  --c-theme-deep:   var(--c-s2-deep);
  --c-theme-light:  var(--c-s2-light);
  --c-theme-accent: var(--c-off-white);
}
body.theme-s3 {
  --c-theme:        var(--c-s3);
  --c-theme-deep:   var(--c-s3-deep);
  --c-theme-light:  var(--c-s3-light);
  --c-theme-accent: var(--c-off-white);
}