/* ============================================================
   PS Design Tokens — CSS custom properties
   Brand : Piano Service (PS) — "Piano House depuis 1977"
   DA : éditorial luxe sombre, fond noir, photos chaudes,
        accent rouge unique, typo géométrique fine.
   Version : 0.1 (2026-06-09) — inférés du Hero Home Figma 16113:5676
             (le fichier Figma PS n'utilise pas de variables natives).

   Convention de nommage :
     --ps-<category>-<name>[-<variant>]
   Catégories : color, font-family, font-weight, font-size,
                line-height, letter-spacing, spacing, radius,
                shadow, container, gradient, opacity

   À enrichir au fil des pages (Contact, services) : la palette
   claire/neutre n'est pas encore confirmée (seul le Hero dark est lu).
   ============================================================ */

:root {

  /* --------------------------------------------------------
     COLOR — Primitives
     -------------------------------------------------------- */

  /* Brand · core */
  --ps-color-black:     #000000;  /* fond hero / dark dominant */
  --ps-color-white:     #FFFFFF;  /* texte sur dark */

  /* Brand · Red (accent unique) */
  --ps-color-red-500:   #FF0308;  /* brand accent — CTA, observé Hero */
  --ps-color-red-600:   #D60207;  /* hover (assombri ~12%) — à confirmer Figma sur état hover */

  /* Neutral — provisoire (sections claires non encore lues, à affiner) */
  --ps-color-neutral-0:    #FFFFFF;
  --ps-color-neutral-50:   #FAFAFA;
  --ps-color-neutral-100:  #F0F0F0;
  --ps-color-neutral-200:  #E0E0E0;
  --ps-color-neutral-700:  #4D4D4C;
  --ps-color-neutral-900:  #1A1A1A;  /* near-black éditorial (vu radial grad #1A1A1A) */

  /* White alphas (textes/borders sur fond dark — observés Hero) */
  --ps-color-on-dark-strong:  rgba(255, 255, 255, 1);     /* titres, body principal */
  --ps-color-on-dark-85:      rgba(255, 255, 255, 0.85);  /* labels stats sur dark */
  --ps-color-on-dark-78:      rgba(255, 255, 255, 0.78);  /* subtitle hero */
  --ps-color-on-dark-62:      rgba(255, 255, 255, 0.62);  /* eyebrow, labels */
  --ps-color-on-dark-45:      rgba(255, 255, 255, 0.45);  /* border bouton secondaire */
  --ps-color-on-dark-14:      rgba(255, 255, 255, 0.14);  /* séparateur horizontal */

  /* --------------------------------------------------------
     COLOR — Semantic aliases (use these in components)
     -------------------------------------------------------- */

  /* Text */
  --ps-color-text-default:       var(--ps-color-neutral-900);
  --ps-color-text-muted:         var(--ps-color-neutral-700);
  --ps-color-text-inverted:      var(--ps-color-white);
  --ps-color-text-on-dark:       var(--ps-color-white);
  --ps-color-text-on-dark-muted: var(--ps-color-on-dark-62);
  --ps-color-text-accent:        var(--ps-color-red-500);

  /* Surface */
  --ps-color-surface-default: var(--ps-color-white);
  --ps-color-surface-dark:    var(--ps-color-black);

  /* Border */
  --ps-color-border-default:    var(--ps-color-neutral-200);
  --ps-color-border-on-dark:    var(--ps-color-on-dark-14);

  /* Action (buttons, CTAs) */
  --ps-color-action-primary:       var(--ps-color-red-500);
  --ps-color-action-primary-hover: var(--ps-color-red-600);
  --ps-color-action-primary-fg:    var(--ps-color-white);
  --ps-color-action-secondary-fg:  var(--ps-color-white);
  --ps-color-action-secondary-border: var(--ps-color-on-dark-45);

  /* --------------------------------------------------------
     TYPOGRAPHY
     -------------------------------------------------------- */

  --ps-font-family-brand: 'Nunito Sans', 'Helvetica Neue', Arial, sans-serif;

  /* Weights — mapping Avenir → Nunito Sans */
  --ps-font-weight-light:    300;  /* Avenir Light (display) → NS 300 (self-hosté 2026-06-09, affine les titres) */
  --ps-font-weight-regular:  400;  /* Avenir Roman / Book */
  --ps-font-weight-medium:   500;  /* Avenir Medium — boutons, nav */
  --ps-font-weight-semibold: 600;
  --ps-font-weight-bold:     700;
  --ps-font-weight-heavy:    900;  /* Avenir Heavy — eyebrows */

  /* Sizes (observés Hero + échelle 4pt) */
  --ps-font-size-11:  11px;
  --ps-font-size-12:  12px;
  --ps-font-size-14:  14px;
  --ps-font-size-16:  16px;
  --ps-font-size-18:  18px;
  --ps-font-size-19:  19px;
  --ps-font-size-20:  20px;
  --ps-font-size-24:  24px;
  --ps-font-size-32:  32px;
  --ps-font-size-40:  40px;
  --ps-font-size-48:  48px;
  --ps-font-size-64:  64px;
  --ps-font-size-80:  80px;
  --ps-font-size-100: 100px;  /* display H1 hero */

  /* Line heights */
  --ps-line-height-tight:   1.0;   /* display hero (leading 100/100) */
  --ps-line-height-snug:    1.15;
  --ps-line-height-normal:  1.2;
  --ps-line-height-editorial: 1.4; /* promesse italic (26.6/19) */
  --ps-line-height-relaxed: 1.5;   /* body subtitle */

  /* Letter spacings */
  --ps-letter-spacing-display: -5px;     /* H1 100px hero */
  --ps-letter-spacing-tight:   -1.8px;
  --ps-letter-spacing-normal:  0;
  --ps-letter-spacing-body:    0.08px;
  --ps-letter-spacing-button:  0.72px;   /* CTA secondaire uppercase */
  --ps-letter-spacing-nav:     0.96px;   /* nav links uppercase 12px */
  --ps-letter-spacing-label:   1.32px;   /* FR/EN, petits labels */
  --ps-letter-spacing-eyebrow-sm: 1.98px;/* "La promesse" 11px */
  --ps-letter-spacing-eyebrow: 2px;      /* "Piano House · depuis 1977" 14px */

  /* --------------------------------------------------------
     SPACING — 4-pt grid
     -------------------------------------------------------- */

  --ps-spacing-0:   0;
  --ps-spacing-4:   4px;
  --ps-spacing-8:   8px;
  --ps-spacing-10:  10px;
  --ps-spacing-12:  12px;
  --ps-spacing-14:  14px;
  --ps-spacing-16:  16px;
  --ps-spacing-19:  19px;  /* button padding vertical */
  --ps-spacing-20:  20px;
  --ps-spacing-24:  24px;
  --ps-spacing-25:  25px;  /* separator pt */
  --ps-spacing-28:  28px;  /* header padding vertical */
  --ps-spacing-32:  32px;
  --ps-spacing-33:  33px;  /* button padding horizontal */
  --ps-spacing-34:  34px;  /* nav gap */
  --ps-spacing-40:  40px;
  --ps-spacing-48:  48px;
  --ps-spacing-52:  52px;  /* page gutter */
  --ps-spacing-64:  64px;
  --ps-spacing-80:  80px;
  --ps-spacing-100: 100px;
  --ps-spacing-120: 120px;
  --ps-spacing-122: 122px; /* gap majeur hero (titre block → séparateur) */

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

  --ps-radius-none:        0;
  --ps-radius-sm:          4px;
  --ps-radius-lg:          24px;
  --ps-radius-full:        9999px;
  --ps-radius-button-pill: 9999px;  /* boutons pill (CTA + secondaire) */

  /* --------------------------------------------------------
     SHADOW
     -------------------------------------------------------- */

  --ps-shadow-soft:   0 14px 16px 0 rgba(0, 0, 0, 0.10);
  --ps-shadow-strong: 0 14px 32px 0 rgba(0, 0, 0, 0.25);

  /* --------------------------------------------------------
     CONTAINER
     -------------------------------------------------------- */

  --ps-container-max:      1336px;  /* contenu hero (1440 - 2×52) */
  --ps-container-gutter:   52px;
  --ps-container-viewport: 1440px;

  /* --------------------------------------------------------
     GRADIENT
     -------------------------------------------------------- */

  /* Overlay hero : assombrit haut + bas pour lisibilité texte sur photo */
  --ps-gradient-hero-overlay: linear-gradient(180deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.15) 35%, rgba(0, 0, 0, 0.9) 100%);

  /* --------------------------------------------------------
     OPACITY
     -------------------------------------------------------- */

  --ps-opacity-nav-link: 0.85;  /* liens nav (opacity-85) */

}