/* Généré au déploiement depuis design-system/tokens/*.css — ne pas éditer. */

/* ---- colors ---- */
/* Mister Szoko — Color system
   Rooted in the logo's deep chocolate brown (#41281A).
   Warm, edible palette: chocolate darks, cream neutrals, caramel + berry accents. */
:root {
  /* ---- Chocolate (primary brand scale) ---- */
  --choco-950: #1C0D06;
  --choco-900: #241009;
  --choco-800: #2E160C;
  --choco-700: #41281A; /* brand core, sampled from logo */
  --choco-600: #5A3826;
  --choco-500: #7A4E36;
  --choco-400: #9C6B4E;
  --choco-300: #BC9174;
  --choco-200: #D8BCA3;
  --choco-100: #ECDECE;

  /* ---- Cream (warm neutrals / surfaces) ---- */
  --cream-50:  #FBF6EF; /* page background */
  --cream-100: #F5ECDE;
  --cream-200: #ECDECB;
  --cream-300: #DEC9AC;
  --cream-400: #C9AC86;

  /* ---- Ink / true neutrals ---- */
  --ink-900: #211712;
  --ink-700: #4A3B31;
  --ink-500: #7C6A5D;
  --ink-300: #B6A899;
  --white:   #FFFFFF;

  /* ---- Accents ---- */
  --caramel-600: #A96A2C;
  --caramel-500: #C68A3C; /* warm gold caramel — primary accent */
  --caramel-400: #DDA556;
  --gold-500:    #E0B24A; /* foil / premium highlight */
  --berry-600:   #8E2A45;
  --berry-500:   #A93A57; /* raspberry pairing — sale / editorial pop */
  --pistachio:   #7C8A4E; /* garnish green */

  /* ---- Semantic (warm-tuned) ---- */
  --success: #4E7C4A;
  --warning: #C68A3C;
  --danger:  #B0402E;
  --info:    #5A6E86;

  /* ================= Semantic aliases ================= */
  --bg-page:        var(--cream-50);
  --bg-page-alt:    var(--cream-100);
  --bg-inverse:     var(--choco-800);
  --surface-card:   var(--white);
  --surface-raised: var(--cream-100);
  --surface-sunken: var(--cream-200);

  --text-strong:    var(--choco-900);
  --text-body:      var(--ink-700);
  --text-muted:     var(--ink-500);
  --text-inverse:   var(--cream-50);
  --text-on-accent: var(--white);

  --border-subtle:  var(--cream-300);
  --border-default: var(--cream-400);
  --border-strong:  var(--choco-400);

  --accent:         var(--caramel-500);
  --accent-hover:   var(--caramel-600);
  --accent-quiet:   var(--cream-200);

  --brand:          var(--choco-700);
  --brand-hover:    var(--choco-800);
  --brand-quiet:    var(--choco-100);

  --focus-ring:     var(--caramel-500);
  --price:          var(--choco-800);
  --sale:           var(--berry-500);
}

/* ---- typography ---- */
/* Mister Szoko — Typographie
   UNE SEULE FAMILLE DE TEXTE : Mulish, des titres au corps.
   Elle en portait deux — Plus Jakarta Sans pour les titres, Mulish pour le
   texte. Deux sans humanistes qui se ressemblent ne font pas un contraste :
   ils font un décalage, qu'on ne sait pas nommer mais qu'on voit. Mulish est
   variable de 300 à 800, donc tout l'écart de graisse dont un titre a besoin
   tient dans le fichier déjà chargé — et Plus Jakarta Sans, retirée, rend
   trois fichiers de police à chaque visite.

   Mono (DM Mono) : réservée aux IDENTIFIANTS qu'on recopie — numéro de
   commande, NIP, IBAN — là où confondre 0 et O coûte un colis. Les montants
   sont passés au sans avec des chiffres tabulaires : ils restent alignés en
   colonne, et se lisent. */
:root {
  --font-display: 'Mulish', system-ui, sans-serif;   /* titres ET corps : une seule famille */
  --font-sans:    'Mulish', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'DM Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Type scale (1.250 major-third, 16px base) */
  --text-2xs: 0.75rem;  /* 12px — plancher, rien en dessous */
  --text-xs:  0.8125rem;/* 13px */
  --text-sm:  0.875rem; /* 14px */
  --text-md:  1rem;     /* 16px — base */
  --text-lg:  1.125rem; /* 18px */
  --text-xl:  1.375rem; /* 22px */
  --text-2xl: 1.75rem;  /* 28px */
  --text-3xl: 2.25rem;  /* 36px */
  --text-4xl: 3rem;     /* 48px */
  --text-5xl: 4rem;     /* 64px */
  --text-6xl: 5.5rem;   /* 88px */

  /* Weights (Mulish) */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-extra:    800;

  /* Line heights */
  --leading-tight:   1.08;
  --leading-snug:    1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  /* Letter spacing */
  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.16em; /* uppercase eyebrows / labels */
}

/* ---- spacing ---- */
/* Mister Szoko — Spacing (4px base grid) */
:root {
  --space-0:  0;
  --space-1:  0.25rem; /* 4 */
  --space-2:  0.5rem;  /* 8 */
  --space-3:  0.75rem; /* 12 */
  --space-4:  1rem;    /* 16 */
  --space-5:  1.5rem;  /* 24 */
  --space-6:  2rem;    /* 32 */
  --space-7:  2.5rem;  /* 40 */
  --space-8:  3rem;    /* 48 */
  --space-9:  4rem;    /* 64 */
  --space-10: 5rem;    /* 80 */
  --space-12: 7rem;    /* 112 */

  --gutter:      var(--space-5);
  --page-pad:    var(--space-6);
  --container:   1240px;
  --container-narrow: 760px;
}

/* ---- radius ---- */
/* Mister Szoko — Corner radii
   Soft, rounded — echoing the smooth pebble shape of the logo blob and a
   praline's edges. Nothing sharp. */
:root {
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   18px;
  --radius-xl:   26px;
  --radius-2xl:  36px;
  --radius-pill: 999px;
  --radius-blob: 42% 58% 56% 44% / 52% 44% 56% 48%; /* organic praline blob */
}

/* ---- shadow ---- */
/* Mister Szoko — Shadows
   Warm, brown-tinted shadows (never neutral grey) — like light on cocoa.
   Soft and low-contrast; product cards lift gently on hover. */
:root {
  --shadow-xs:  0 1px 2px rgba(46, 22, 12, 0.06);
  --shadow-sm:  0 2px 6px rgba(46, 22, 12, 0.08);
  --shadow-md:  0 8px 20px -6px rgba(46, 22, 12, 0.14);
  --shadow-lg:  0 18px 40px -12px rgba(46, 22, 12, 0.20);
  --shadow-xl:  0 30px 60px -18px rgba(46, 22, 12, 0.26);
  --shadow-inset: inset 0 1px 2px rgba(46, 22, 12, 0.10);

  /* Focus ring */
  --ring: 0 0 0 3px rgba(198, 138, 60, 0.45);
}

/* ---- motion ---- */
/* Mister Szoko — Motion
   Gentle and appetising. Ease-out for entrances, a soft settle on hover.
   No aggressive bounces; a warm, unhurried "melt". */
:root {
  --ease-out:   cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0.05, 0.36, 1); /* @kind other */
  /* subtle overshoot */
  --ease-soft:  cubic-bezier(0.34, 1.28, 0.64, 1); /* @kind other */

  --dur-fast:   140ms; /* @kind other */
  --dur-base:   240ms; /* @kind other */
  --dur-slow:   420ms; /* @kind other */

  --lift: translateY(-4px); /* @kind other */
}

/* ---- fonts ---- */
/* Mister Szoko webfonts — HÉBERGÉES ICI, pas chez Google.
   NOTE: The real Mister Szoko brand fonts were not provided. These are the
   closest Google Fonts substitutes chosen to match the warm, premium,
   artisanal-chocolate feel of the logo. Replace with licensed brand fonts
   when available.

   POURQUOI EN LOCAL. Un @import vers fonts.googleapis.com est une feuille
   BLOQUANTE : tant qu'elle ne répond pas, la page reste blanche. Derrière un
   pare-feu d'entreprise, un bloqueur de traqueurs, ou simplement un réseau
   lent, cela se paie en secondes d'écran vide — mesuré à 14 s dans un
   environnement où la connexion est refusée. Servis depuis notre propre
   domaine, les fichiers arrivent avec le reste de la page, et le site ne
   dépend plus de la disponibilité d'un tiers.

   CE QUI EST EMBARQUÉ. DEUX familles, celles que typography.css utilise
   réellement : Mulish (tout le texte, titres compris) et DM Mono (les
   identifiants). Plus Jakarta Sans portait les titres ; une seule famille de
   texte se lit mieux que deux qui se ressemblent, et ses trois fichiers ne
   sont plus téléchargés. DM Serif Display avait quitté la marque de la même
   façon, en continuant d'être servie.

   SOUS-ENSEMBLES. latin (anglais), latin-ext (polonais), cyrillic et
   cyrillic-ext (ukrainien). Le vietnamien, que Google sert d'office, a été
   écarté. Grâce à unicode-range le navigateur ne télécharge que le jeu dont
   il a besoin : un visiteur polonais prend environ 85 Ko, pas les 268 Ko de
   l'ensemble.

   Licence SIL Open Font License 1.1 pour les trois familles — l'hébergement
   sur son propre domaine est expressément permis.
   Régénérer : voir tools/fetch-fonts.sh */
/* latin-ext */
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/dm-mono-normal-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/dm-mono-normal-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/dm-mono-normal-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/dm-mono-normal-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Mulish';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/mulish-italic-400-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Mulish';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/mulish-italic-400-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Mulish';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/mulish-italic-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Mulish';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/mulish-italic-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url(fonts/mulish-normal-300_800-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url(fonts/mulish-normal-300_800-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url(fonts/mulish-normal-300_800-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url(fonts/mulish-normal-300_800-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}