/* tokens.css — variables CSS dérivées de tokens.json
 * Source : Site Produits.html (artefact dc-runtime décodé).
 * La source n'utilisait que --accent et --rowpad ; les autres tokens sont une
 * normalisation des valeurs littérales répétées dans le template.
 */

:root {
  /* ---- Couleur : accent (prop configurable) ---- */
  --accent: #2563eb;
  --accent-tint: #eff4ff;

  /* ---- Couleur : texte ---- */
  --color-text-primary: #1c1f23;
  --color-text-body: #3a3f47;
  --color-text-muted: #4b515a;
  --color-text-secondary: #6c737c;
  --color-text-faint: #9aa0a8;
  --color-text-faintest: #aeb4bc;

  /* ---- Couleur : bordures ---- */
  --color-border: #e7eaed;
  --color-border-card: #eaedf0;
  --color-border-divider: #eef0f2;
  --color-border-divider-alt: #f0f2f4;
  --color-border-hover: #cdd2d8;
  --color-border-empty: #e0e4e8;

  /* ---- Couleur : surfaces ---- */
  --color-surface-page: #ffffff;
  --color-surface-white: #fff;
  --color-surface-input: #f7f8fa;
  --color-surface-menu-hover: #f4f5f6;
  --color-surface-row-hover: #fbfcff;

  /* ---- Couleur : placeholders ---- */
  --color-placeholder-image: #eef0f2;
  --color-placeholder-image-detail: #eceef1;
  --color-placeholder-thumb-active: #e3e7ec;
  --color-placeholder-dot: #c2c7cd;
  --color-overlay: rgba(255, 255, 255, 0.9);

  /* ---- Typographie ---- */
  --font-family: 'IBM Plex Sans', sans-serif;
  --font-family-ui: -apple-system, BlinkMacSystemFont, sans-serif;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;

  --font-size-xs: 11px;
  --font-size-sm: 12px;
  --font-size-base: 13px;
  --font-size-md: 14px;
  --font-size-lg: 15px;
  --font-size-xl: 16px;
  --font-size-control: 17px;
  --font-size-logo: 18px;
  --font-size-icon: 20px;
  --font-size-price-detail: 25px;
  --font-size-title: 27px;

  --line-height-tight: 1.2;
  --line-height-snug: 1.25;
  --line-height-heading: 1.3;
  --line-height-normal: 1.4;
  --line-height-prose: 1.65;

  --letter-spacing-tight: -0.01em;
  --letter-spacing-uppercase-sm: 0.07em;
  --letter-spacing-uppercase-lg: 0.08em;

  /* ---- Rayons ---- */
  --radius-bar: 2px;
  --radius-checkbox: 5px;
  --radius-menu-item: 7px;
  --radius-button: 8px;
  --radius-control: 9px;
  --radius-button-lg: 10px;
  --radius-menu: 12px;
  --radius-card: 13px;
  --radius-image: 16px;
  --radius-pill: 20px;
  --radius-full: 50%;

  /* ---- Ombres ---- */
  --shadow-menu-filter: 0 12px 34px rgba(20, 23, 28, 0.14);
  --shadow-menu-sort: 0 10px 32px rgba(20, 23, 28, 0.12);
  --shadow-card-hover: 0 6px 20px rgba(20, 23, 28, 0.07);

  /* ---- Espacements ---- */
  --space-page-x: 28px;
  --rowpad: 16px; /* densité Confortable ; Compact = 11px */
  --space-2: 2px;
  --space-6: 6px;
  --space-7: 7px;
  --space-9: 9px;
  --space-10: 10px;
  --space-11: 11px;
  --space-14: 14px;
  --space-16: 16px;
  --space-18: 18px;
  --space-20: 20px;
  --space-30: 30px;
  --space-40: 40px;

  /* ---- Tailles ---- */
  --size-topbar-height: 62px;
  --size-control-md: 40px;
  --size-control-sm: 36px;
  --size-control-xs: 34px;
  --size-control-cta: 46px;
  --size-list-thumb: 78px;
  --size-detail-thumb: 66px;
  --size-avatar: 34px;
  --size-content-max: 1180px;
  --size-search-max: 520px;
  --size-menu-min: 236px;

  /* ---- Transitions ---- */
  --transition-card: border-color .12s, background .12s;
  --transition-card-grid: border-color .12s, box-shadow .12s;
}

/* Variante densité « Compact » (prop density) */
[data-density="compact"] {
  --rowpad: 11px;
}