/* =====================================================================
   Mister Szoko — couche de marque de la console.
   =====================================================================
   Chargée APRÈS global.css, qui reste l'export structurel d'origine
   (mise en page, composants) et n'est pas dupliqué ici.

   SOURCE UNIQUE : tokens/ est la copie conforme du design system
   (mrszoko/design-system/tokens/). Aucune valeur de marque n'est
   réécrite en dur ici — ce fichier ne fait que faire correspondre les
   jetons de la console (--color-*, --font-ui…) à ceux du design system
   (--brand, --accent, --cream-*…). Pour faire évoluer la marque :
   modifier le design system, recopier tokens/, la console suit.

   Note : les jetons homonymes (--font-display, --radius-sm/md/lg,
   --shadow-*) sont volontairement écrasés par ceux du design system —
   les rayons deviennent plus doux (6→8, 8→12, 12→18 px) et les ombres
   passent du gris au brun cacao, ce qui est précisément l'intention.
   ===================================================================== */
@import url('tokens/fonts.css');
@import url('tokens/colors.css');
@import url('tokens/typography.css');
@import url('tokens/spacing.css');
@import url('tokens/radius.css');
@import url('tokens/shadow.css');
@import url('tokens/motion.css');

:root {
  /* ---- Couleurs : jetons console → jetons design system -------------- */
  --color-primary:              var(--brand);        /* chocolat #41281A */
  --color-secondary:            var(--accent);       /* caramel  #C68A3C */
  --color-collect:              var(--brand);        /* retrait boutique   */
  --color-linked:               var(--accent);

  --color-bg:                   var(--bg-page-alt);  /* crème 100 */
  --color-surface:              var(--surface-card);
  --color-background-secondary: var(--bg-page);      /* crème 50  */

  --color-text:                 var(--text-strong);
  --color-text-muted:           var(--text-muted);
  --color-text-primary:         var(--text-strong);
  --color-text-secondary:       var(--text-muted);
  --color-ink:                  var(--ink-900);

  --color-border-secondary:     var(--border-default);
  --color-border-tertiary:      var(--border-subtle);

  --color-on-abricot:           var(--choco-600);
  --color-collection-border:    var(--caramel-600);
  --color-collection-fill:      var(--gold-500);
  --color-collection-icon:      var(--choco-800);
  --color-popup:                var(--choco-600);

  /* Sémantiques réchauffées (aucun bleu ni rouge pur), exposées à la page */
  --color-success:      var(--success);
  --color-success-bg:   #E9F0E4;
  --color-danger:       var(--danger);
  --color-danger-bg:    #FBEAE5;
  --color-warning:      var(--warning);
  --color-warning-bg:   var(--cream-100);
  --color-info:         var(--info);
  --color-info-bg:      #E8EBEF;

  /* ---- Typographie --------------------------------------------------- */
  --font-ui:     var(--font-sans);      /* Mulish            */
  --font-accent: var(--font-display);   /* Plus Jakarta Sans */
}

/* ---- Mouvement « melt » du design system ---------------------------- */
button, a, input, select, [role="button"] {
  transition-timing-function: var(--ease-out);
  transition-duration: var(--dur-base);
}
@media (prefers-reduced-motion: reduce) {
  button, a, input, select, [role="button"] { transition: none; }
}

/* ---- Liens ---------------------------------------------------------- */
a { color: var(--brand); }
a:hover { color: var(--brand-hover); }

/* ---- Logo : galet quasi carré (197 × 185), cadré par la hauteur ----- */
img[alt="Mister Szoko"] {
  width: auto !important;
  max-width: 100% !important;
  height: 96px !important;
}