/* Opal DX — Design tokens
   Direction : Dyson-restraint × brand palette en accents
   Echelle 4pt · breakpoints 640 / 1024 / 1440 */

:root {
  /* ---- Couleurs : surfaces ---- */
  --c-bg:           #FFFFFF;
  --c-bg-subtle:    #F6F6F8;
  --c-bg-muted:     #EFEFF2;
  --c-bg-dark:      #0A0A0B;
  --c-bg-darker:    #050505;

  /* ---- Couleurs : texte ---- */
  --c-text:         #0A0A0B;
  --c-text-muted:   #5B5C60;
  --c-text-faint:   #8A8B8F;
  --c-text-inv:     #FFFFFF;
  --c-text-inv-muted:#B5B6BA;

  /* ---- Couleurs : borders ---- */
  --c-border:       #E5E5E7;
  --c-border-strong:#1A1A1A;

  /* ---- Marque (en accents seulement) ---- */
  --c-brand:        #0060A8;   /* bleu Opal — CTA, liens */
  --c-brand-700:    #004C86;
  --c-brand-50:     #E6F0F8;

  --c-promo:        #C01860;   /* magenta — badges promo */
  --c-promo-50:     #FCE7EF;

  --c-featured:     #F0D800;   /* jaune — badge "phare" */
  --c-accent:       #F09018;   /* orange — secondaire */

  --c-success:      #1F7A4D;
  --c-out-of-stock: #8A8B8F;

  /* ---- Typo ---- */
  --ff-display: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --ff-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --ff-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* type scale modulaire */
  --fs-12: 0.75rem;
  --fs-13: 0.8125rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-32: 2rem;
  --fs-40: 2.5rem;
  --fs-56: 3.5rem;
  --fs-72: 4.5rem;
  --fs-96: 6rem;

  --lh-tight: 1.02;
  --lh-snug:  1.15;
  --lh-base:  1.5;
  --lh-loose: 1.65;

  --tracking-tight: -0.03em;
  --tracking-snug:  -0.01em;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.12em;

  /* ---- Spacing 4pt ---- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-8:  32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;
  --s-32: 128px;
  --s-40: 160px;

  /* ---- Rayons ---- */
  --r-0: 0;
  --r-1: 2px;
  --r-2: 4px;
  --r-3: 8px;
  --r-4: 12px;
  --r-pill: 999px;

  /* ---- Ombres (discrètes) ---- */
  --shadow-1: 0 1px 2px rgba(10,10,11,.04);
  --shadow-2: 0 4px 16px -2px rgba(10,10,11,.06), 0 2px 4px -1px rgba(10,10,11,.04);
  --shadow-card-hover: 0 16px 40px -8px rgba(10,10,11,.10), 0 4px 12px -2px rgba(10,10,11,.06);

  /* ---- Conteneurs ---- */
  --container-max: 1440px;
  --container-pad: clamp(16px, 4vw, 48px);
  --grid-gap: clamp(16px, 2vw, 32px);

  /* ---- Motion (Dyson-like : lent, soyeux) ---- */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-cubic: cubic-bezier(0.33, 1, 0.68, 1);

  --dur-fast:   180ms;
  --dur-base:   320ms;
  --dur-slow:   600ms;
  --dur-reveal: 900ms;

  /* ---- Z-index ---- */
  --z-header: 50;
  --z-overlay: 80;
  --z-modal: 100;
}

/* préfère la version dark des médias (utile pour images PNG fond clair) */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
    --dur-reveal: 0ms;
  }
}