/* ==========================================================================
   TOKENS — valeurs relevées sur www.on.com/fr-fr (aucune valeur inventée)
   Source : /_nuxt/entry.css + chunks CSS de production
   ========================================================================== */

:root {
  /* --- Couleurs de marque ------------------------------------------------ */
  --on-black: #000;
  --on-white: #fff;
  --on-ink: #151522;          /* fond du pied de page sombre */
  --on-grey-900: #333;
  --on-grey-700: #4d4d4d;
  --on-grey-600: #666;
  --on-grey-400: #ccc;
  --on-grey-300: #ddd;
  --on-grey-200: #e5e5e5;
  --on-grey-100: #f5f5f5;
  --on-grey-050: #f7f7f7;
  --on-sand-050: #faf7f6;
  --on-sand-100: #f0eceb;
  --on-sand-200: #dad8d2;
  --on-olive: #494740;
  --on-blue: #2f7efe;         /* anneau de focus */
  --on-mint: #33ffb6;         /* accent */
  --on-label: #995c00;        /* pastille « Nouveauté » sur les cartes produit */
  --on-error: #ed0000;

  --on-overlay-10: #0000001a;
  --on-overlay-08: #00000014;
  --on-overlay-15: #00000026;

  /* --- Surfaces sémantiques --------------------------------------------- */
  --bg: var(--on-white);
  --fg: var(--on-black);
  --bg-muted: var(--on-grey-050);
  --border: var(--on-grey-200);
  /* Bord des champs et contrôles : la référence utilise #ccc (1,61:1 sur blanc),
     insuffisant au regard du critère WCAG 1.4.11 (3:1 pour la limite d'un
     composant). Valeur relevée puis remontée au minimum conforme, mesurée à
     3,23:1 — c'est le seul écart chromatique assumé vis-à-vis de la référence. */
  --border-strong: #8f8f8f;
  --text-muted: var(--on-grey-900);
  --text-subtle: var(--on-grey-600);

  /* --- Typographie ------------------------------------------------------- */
  --font-sans: On, "Noto Sans JP", "Noto Sans KR", system-ui, -apple-system,
    "Segoe UI", roboto, ubuntu, cantarell, "Noto Sans", sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-mono: "On Mono", menlo, consolas, "Roboto Mono", "Ubuntu Monospace",
    "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace;

  /* Échelle fluide exacte de la référence */
  --fs-2xs: 0.625rem;
  --fs-xs: clamp(0.75rem, 0.72rem + 0.13vw, 0.875rem);
  --fs-sm: clamp(0.875rem, 0.84rem + 0.13vw, 1rem);
  --fs-md: clamp(1rem, 0.94rem + 0.26vw, 1.25rem);
  --fs-lg: clamp(1.25rem, 1.16rem + 0.39vw, 1.625rem);
  --fs-xl: clamp(1.625rem, 1.52rem + 0.45vw, 2.0625rem);
  --fs-2xl: clamp(2.0625rem, 1.93rem + 0.58vw, 2.625rem);
  --fs-3xl: clamp(2.625rem, 2.32rem + 1.3vw, 3.3125rem);
  --fs-4xl: clamp(3.3125rem, 2.81rem + 2.14vw, 5.375rem);

  --lh-tight: 1.2;
  --lh-heading: 1.25;
  --lh-body: 1.5;

  --ls-tight: -0.01em;
  --ls-mono: 0.0525rem;
  --ls-label: 0.09rem;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;

  /* --- Espacements ------------------------------------------------------- */
  --sp-3xs: 0.125rem;
  --sp-2xs: 0.25rem;
  --sp-xs: 0.5rem;
  --sp-sm: 0.75rem;
  --sp-md: 1rem;
  --sp-lg: 1.5rem;
  --sp-xl: 2rem;
  --sp-2xl: 2.5rem;
  --sp-3xl: 4rem;
  --sp-4xl: 6rem;

  /* Gouttière de page : identique à la référence */
  --gutter: clamp(1rem, 4.2667vw, 2rem);
  --grid-gap: clamp(0.5rem, 2.1333vw, 1rem);
  --page-max: 120rem;

  /* --- Rayons ------------------------------------------------------------ */
  --radius-xs: 0.1875rem;
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-pill: 2.5rem;
  --radius-circle: 50%;

  /* --- Ombres ------------------------------------------------------------ */
  --shadow-panel: 0 0.75rem 1.5rem #0000001a, 0 0 0.1875rem #0000000d,
    0 0 0 0.0625rem #0000000f;
  --shadow-header: 0 0.0625rem 0.125rem #00000014;
  --shadow-footer-edge: 0 -0.0625rem 0.125rem #00000014;

  /* --- Chrome du site ---------------------------------------------------- */
  --header-h: 5.625rem;          /* 90px desktop */
  --header-h-mobile: 3.5rem;     /* 56px mobile */
  --logo-size: 4rem;
  --logo-size-mobile: 2.5rem;
  --banner-h: 2.25rem;

  /* --- Transitions ------------------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 0.15s;
  --dur-base: 0.25s;
  --dur-slow: 0.4s;
  --dur-panel: 0.3s;

  /* --- Empilement -------------------------------------------------------- */
  --z-base: 1;
  --z-sticky: 900;
  --z-footer: 20;
  --z-header: 1000;
  --z-panel: 1002;
  --z-overlay: 1001;
  --z-drawer: 1100;
  --z-modal: 1200;
  --z-toast: 1300;
}

/* --- Points de rupture (référence : :export du bundle) ---------------------
   mobile 360 · mobileLarge 412 · tablet 768 · tabletLarge 1024
   desktop 1200 · desktopLarge 1440 · desktopHuge 1800 · desktopGigantic 2500
   -------------------------------------------------------------------------- */

@media (min-width: 1024px) {
  :root {
    --grid-gap: clamp(1rem, 1.6667vw, 2rem);
    --gutter: clamp(2rem, 3.33vw, 3.5rem);
  }
}

/* --- Polices locales ------------------------------------------------------ */
@font-face {
  font-family: On;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/OnDiatypeStandard-Regular.woff2") format("woff2");
}
@font-face {
  font-family: On;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/OnDiatypeStandard-Medium.woff2") format("woff2");
}
@font-face {
  font-family: On;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/OnDiatypeStandard-Bold.woff2") format("woff2");
}
@font-face {
  font-family: "On Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/OnDiatypeMono-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "On Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/OnDiatypeMono-Medium.woff2") format("woff2");
}