/* ==========================================================================
   tokens.css — valeurs relevées sur store-jp.mirumi.tokyo (thème Horizon)
   Aucune valeur en dur ailleurs que dans ce fichier.
   ========================================================================== */

@font-face {
  font-family: "Inter";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/inter-400.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/inter-700.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow Condensed";
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/barlow-condensed-600.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow Condensed";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/barlow-condensed-700.woff2") format("woff2");
}

:root {
  /* --- Familles ------------------------------------------------------- */
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-heading: "Barlow Condensed", "Inter", sans-serif;
  --font-body-weight: 400;
  --font-heading-weight: 600;

  /* --- Échelle typographique ------------------------------------------ */
  --font-size-3xs: 0.625rem;   /* 10px — liens de pied de page */
  --font-size-2xs: 0.75rem;    /* 12px */
  --font-size-xs: 0.8125rem;   /* 13px */
  --font-size-sm: 0.875rem;    /* 14px — paragraphe par défaut */
  --font-size-md: 1rem;        /* 16px */
  --font-size-lg: 1.125rem;    /* 18px — titre de carte produit */
  --font-size-xl: 1.25rem;     /* 20px — lien de navigation */
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 2rem;       /* 32px — h2 de section */
  --font-size-4xl: 2.5rem;
  --font-size-5xl: 3rem;       /* 48px — h1 de fiche produit */
  --font-size-6xl: 3.5rem;

  --font-size-h1: clamp(2.25rem, 4.8vw, 3rem);
  --font-size-h2: 2rem;
  --font-size-h3: 1.5rem;
  --font-size-h4: 1.125rem;

  --line-height-display-tight: 1;
  --line-height-display-normal: 1.1;
  --line-height-heading-normal: 1.25;
  --line-height-body-normal: 1.4;
  --line-height-body-loose: 1.6;

  --letter-spacing-sm: 0.06em;
  --letter-spacing-md: 0.13em;

  /* --- Couleurs (schéma 1 : fond blanc) -------------------------------- */
  --color-background: #ffffff;
  --color-background-rgb: 255 255 255;
  --color-foreground: #000000;
  --color-foreground-rgb: 0 0 0;
  --color-heading: #a42325;
  --color-primary: #a42325;
  --color-primary-rgb: 164 35 37;
  --color-primary-hover: #780406;
  --color-border: #e6e6e6;
  --color-border-rgb: 230 230 230;
  --color-muted: rgb(0 0 0 / 0.6);

  /* Schéma 2 : fond gris clair (listes, pied de page, en-tête plein) */
  --color-surface: #f1f1f1;
  --color-surface-rgb: 241 241 241;
  --color-surface-hover: #e4e4e4;

  /* Schéma 5 : fond noir (bandeau d'annonce, section vidéo) */
  --color-inverse-background: #000000;
  --color-inverse-foreground: #ffffff;

  --color-white: #ffffff;
  --color-black: #000000;
  --color-error: #8b0000;
  --color-success: #006400;
  --color-outofstock: #c8c8c8;

  --color-button-text: #ffffff;
  --color-button-background: var(--color-primary);
  --color-button-hover-background: rgb(120 4 6 / 0.91);

  /* --- Espacements ----------------------------------------------------- */
  --space-3xs: 0.125rem;
  --space-2xs: 0.3rem;
  --space-xs: 0.5rem;
  --space-sm: 0.7rem;
  --space-md: 0.8rem;
  --space-lg: 1rem;
  --space-xl: 1.25rem;
  --space-2xl: 1.5rem;
  --space-3xl: 1.75rem;
  --space-4xl: 2rem;
  --space-5xl: 3rem;
  --space-6xl: 4rem;

  /* --- Grille de page --------------------------------------------------- */
  --page-max-width: 120rem;      /* 1920px */
  --page-padding: 40px;
  --page-padding-mobile: 16px;
  --content-narrow: 46rem;

  /* --- Composants ------------------------------------------------------- */
  --radius-none: 0px;
  --radius-xs: 0.2rem;
  --radius-sm: 0.6rem;
  --radius-pill: 40px;
  --border-width: 1px;

  --button-padding-block: 16px;
  --button-padding-inline: 24px;
  --button-height: 52px;
  --touch-target: 44px;

  --card-inset: 60px;            /* retrait de l'image dans la carte produit (accueil) */
  --card-inset-list: 50px;       /* retrait mesuré sur les pages de liste */
  --card-inset-mobile: 45px;
  --card-inset-list-mobile: 35px;
  --card-gap: 1px;

  --header-height: 66px;
  --header-height-mobile: 58px;
  --announcement-height: 46px;   /* recalculé au chargement par shell.js */

  --hero-ratio: 4885 / 2748;     /* 1.7776 */

  /* --- Animation --------------------------------------------------------- */
  --ease-out-cubic: cubic-bezier(0.33, 1, 0.68, 1);
  --ease-out-quad: cubic-bezier(0.32, 0.72, 0, 1);
  --speed-fast: 0.0625s;
  --speed: 0.125s;
  --speed-slow: 0.2s;

  --layer-flat: 1;
  --layer-raised: 2;
  --layer-sticky: 8;
  --layer-overlay: 16;
  --layer-drawer: 18;
}

@media (max-width: 749px) {
  :root {
    --page-padding: var(--page-padding-mobile);
    --card-inset: var(--card-inset-mobile);
    --card-inset-list: var(--card-inset-list-mobile);
    --font-size-5xl: 2.25rem;   /* h1 fiche produit = 36px en mobile */
    --font-size-3xl: 2rem;
  }
}