/**
 * Maïté Design System — tokens couleur + typographie.
 * Sync Figma « DS » · collection BERCY / Tokens · écran recette 8218:1598.
 */

:root {
  /* Couleurs */
  --ds-bg: #f8f8f8;
  --ds-surface: #ffffff;
  --ds-header: #ffffff;
  --ds-black: #131314;
  --ds-grey-5: #1e1f20;
  --ds-grey-4: #787d8a;
  --ds-grey-3: #afb4bf;
  --ds-grey-2: #e4e4e4;
  --ds-grey-1: #f8f8f8;
  --ds-white: #ffffff;
  --ds-blue: #0d99ff;
  --ds-bad: #fc8d82;
  --ds-good: #2ecc71;
  --ds-coral: #ff8559;
  --ds-green-light: #e8f5ef;

  /* Police */
  --ds-font: 'Satoshi', 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial,
    sans-serif;

  /* h1 — Satoshi Bold 28 */
  --ds-h1-size: 28px;
  --ds-h1-weight: 700;
  --ds-h1-lh: 1.4;
  --ds-h1-ls: -1px;

  /* h2 — Satoshi Bold 20 */
  --ds-h2-size: 20px;
  --ds-h2-weight: 700;
  --ds-h2-lh: 1.4;
  --ds-h2-ls: -0.5px;

  /* h3 / L Bold — Satoshi Bold 16 */
  --ds-h3-size: 16px;
  --ds-h3-weight: 700;
  --ds-h3-lh: 1.4;
  --ds-h3-ls: -0.5px;

  /* L — Satoshi Medium 16 */
  --ds-l-size: 16px;
  --ds-l-weight: 500;
  --ds-l-lh: 1.4;
  --ds-l-ls: -0.5px;

  /* M / M Bold — Satoshi Medium 14 */
  --ds-m-size: 14px;
  --ds-m-weight: 500;
  --ds-m-lh: 1.4;
  --ds-m-ls: -0.5px;
}

/* Utilitaires typographiques */
.ds-h1,
.ds-typo-h1 {
  font-family: var(--ds-font);
  font-size: var(--ds-h1-size);
  font-weight: var(--ds-h1-weight);
  line-height: var(--ds-h1-lh);
  letter-spacing: var(--ds-h1-ls);
}

.ds-h2,
.ds-typo-h2 {
  font-family: var(--ds-font);
  font-size: var(--ds-h2-size);
  font-weight: var(--ds-h2-weight);
  line-height: var(--ds-h2-lh);
  letter-spacing: var(--ds-h2-ls);
}

.ds-h3,
.ds-typo-h3,
.ds-l-bold,
.ds-typo-l-bold {
  font-family: var(--ds-font);
  font-size: var(--ds-h3-size);
  font-weight: var(--ds-h3-weight);
  line-height: var(--ds-h3-lh);
  letter-spacing: var(--ds-h3-ls);
}

.ds-l,
.ds-typo-l {
  font-family: var(--ds-font);
  font-size: var(--ds-l-size);
  font-weight: var(--ds-l-weight);
  line-height: var(--ds-l-lh);
  letter-spacing: var(--ds-l-ls);
}

.ds-m,
.ds-typo-m,
.ds-m-bold,
.ds-typo-m-bold {
  font-family: var(--ds-font);
  font-size: var(--ds-m-size);
  font-weight: var(--ds-m-weight);
  line-height: var(--ds-m-lh);
  letter-spacing: var(--ds-m-ls);
}

/* Logo trace loader — piste claire + halo tournant masqué sur le monogramme Maïté.
   Le halo est animé en transform:rotate() (compositing GPU) plutôt qu'en
   stroke-dashoffset : ce dernier force un repaint du trait à chaque frame sur le
   thread principal, donc il saccade dès que le thread est occupé (ex. renderRecipes()
   pendant mmGlobalCatalogPullQuiet()). Le rotor GPU reste fluide même dans ce cas. */
.maite-trace-spinner{
  display:block;width:72px;height:auto;flex-shrink:0;overflow:visible;
}
.maite-trace-spinner .track{
  fill:none;stroke:#ffd9c2;stroke-width:14;stroke-linecap:round;stroke-linejoin:round;
}
.maite-trace-spinner .sweep-rotor{
  transform-origin:87px 41.5px;
  animation:maite-sweep 2.8s linear infinite;
  will-change:transform;
}
@keyframes maite-sweep{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){
  .maite-trace-spinner .sweep-rotor{animation:none}
}