/* ==========================================================================
   Ellery — Tokens (palette, typographie, radii, ombres)
   Dérivé du design system Qomit, adapté à la charte Ellery (bois / crème).
   ========================================================================== */

/* ----- Polices (auto-hébergées, conformité RGPD) ------------------------- */
@font-face {
  font-family: "Flowmery";
  src: url("../assets/fonts/Flowmery-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* Glyphes accentués dédiés (À-ÿ) — prioritaire dans la pile display */
@font-face {
  font-family: "Flowmery Accents";
  src: url("../assets/fonts/Flowmery-Accents.woff2") format("woff2");
  unicode-range: U+00C0-00FF;
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../assets/fonts/Poppins-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../assets/fonts/Poppins-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../assets/fonts/Poppins-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- Palette Ellery (bois, crème, brun) -------------------------------- */
  --q-corail:     #F4EFE6;   /* crème chaud — surfaces douces */
  --q-corail-100: #FAF7F0;
  --q-corail-200: #F4EFE6;
  --q-blue:       #EAE1D0;   /* beige sable — surfaces secondaires */
  --q-blue-100:   #F3EDE1;
  --q-blue-200:   #EAE1D0;
  --q-purple:     #3B2D21;   /* brun profond — texte & fonds sombres */
  --q-purple-200: #D9CDBD;
  --q-purple-300: #B9AA91;
  --q-purple-400: #8F7B62;
  --q-purple-800: #4A3A2C;
  --q-orange:     #B0794A;   /* bois doré — accent principal */
  --q-orange-100: #EBDFCB;
  --q-orange-200: #DFCEB2;
  --q-orange-300: #CDA97C;
  --q-orange-600: #96613A;
  --q-orange-700: #7C4E2D;
  --q-grey-100:   #EDE6DA;
  --q-grey-200:   #DDD3C2;
  --q-grey-300:   #C4B6A0;
  --q-grey-500:   #8F8170;
  --q-grey-700:   #5F5243;
  --q-white:      #FFFFFF;
  --q-dark:       #000000;

  /* --- Sémantique --------------------------------------------------------- */
  --bg:           var(--q-white);
  --bg-soft:      var(--q-corail);
  --fg:           var(--q-purple);
  --fg-2:         var(--q-grey-700);
  --fg-3:         var(--q-grey-500);
  --accent:       var(--q-orange);
  --accent-hover: var(--q-orange-600);
  --border:       var(--q-grey-200);
  --border-soft:  var(--q-grey-100);
  --divider:      var(--q-grey-200);

  /* --- Radii --------------------------------------------------------------- */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-pill: 999px;

  /* --- Ombres ---------------------------------------------------------------- */
  --shadow-sm: 0 2px 6px rgba(20, 23, 28, 0.06), 0 1px 2px rgba(20, 23, 28, 0.04);
  --shadow-md: 0 8px 24px rgba(20, 23, 28, 0.08), 0 2px 6px rgba(20, 23, 28, 0.04);

  /* --- Mouvement --------------------------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  /* --- Typographie -------------------------------------------------------- */
  --font-display: "Flowmery Accents", "Flowmery", cursive;
  --font-body:    "Poppins", system-ui, -apple-system, sans-serif;

  /* --- Mise en page (full-bleed hybride) ----------------------------------
     Les fonds de section couvrent 100 % de la largeur ; le contenu reste calé
     sur une grille centrée de --page-max. --bleed vaut 0 sous ce seuil et
     absorbe l'excédent au-delà (à ajouter aux gouttières des sections). */
  --page-max: 1440px;
  --bleed: max(0px, calc((100% - var(--page-max)) / 2));
}

::selection {
  background: var(--q-orange);
  color: #fff;
}