/* =========================================================
   TiraMaison — Design tokens
   Valeurs déduites de la maquette design/ui1-accueil.png
   Référence desktop : 1440 px · Référence mobile : 390 px
   ========================================================= */

:root {
  /* ---- Couleurs de marque ---- */
  --tm-yellow: #fed92e;
  --tm-yellow-600: #f6cd14;
  --tm-yellow-700: #e4bb00;
  --tm-yellow-soft: #fdf3de;
  --tm-yellow-tint: #fff8e0;

  --tm-ink: #121212;
  --tm-ink-900: #0d0d0d;
  --tm-ink-800: #1c1c1c;
  --tm-ink-700: #2b2b2b;
  --tm-ink-600: #3d3d3d;

  --tm-cream: #fdf9f2;
  --tm-cream-2: #f7f1e6;
  --tm-white: #ffffff;

  --tm-line: #ece5d8;
  --tm-line-strong: #d9d2c4;
  --tm-line-dark: #2e2e2e;

  --tm-text: #121212;
  --tm-muted: #6e6a63;
  --tm-muted-2: #8d887f;
  --tm-on-dark: #f6f4f0;
  --tm-muted-dark: #a9a49b;

  --tm-success: #17703f;
  --tm-success-bg: #e8f5ec;
  --tm-danger: #b8301a;
  --tm-danger-bg: #fdecea;
  --tm-info-bg: #eef4fd;
  --tm-info: #1c4f9c;

  /* ---- Typographie ---- */
  --tm-font-display: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --tm-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --tm-font-hand: "Caveat", "Segoe Script", "Bradley Hand", cursive;

  --tm-fs-topbar: 14px;
  --tm-fs-nav: 14px;
  --tm-fs-body: 16px;
  --tm-fs-sm: 14px;
  --tm-fs-xs: 12.5px;

  /* Titres — fluides entre mobile 390 et desktop 1440 */
  /* 44 px à 390 (maquette mobile) → 65 px à 1280 (maquette desktop) */
  --tm-fs-h1: clamp(44px, 34.8px + 2.36vw, 65px);
  --tm-fs-h2: clamp(28px, 2.97vw, 38px);
  --tm-fs-h3: clamp(18px, 1.56vw, 20px);
  --tm-fs-h4: 18px;

  /* ---- Grille & espacements ---- */
  --tm-container: 1172px;
  --tm-gutter: clamp(20px, 4.38vw, 56px);
  --tm-topbar-h: 30px;
  --tm-header-h: 58px;
  --tm-section-y: clamp(40px, 4.4vw, 56px);

  /* ---- Formes ---- */
  --tm-r-xs: 6px;
  --tm-r-sm: 8px;
  --tm-r: 12px;
  --tm-r-lg: 16px;
  --tm-r-xl: 22px;
  --tm-r-pill: 999px;

  --tm-shadow-xs: 0 1px 2px rgba(18, 18, 18, 0.06);
  --tm-shadow-sm: 0 2px 8px -2px rgba(18, 18, 18, 0.10);
  --tm-shadow-md: 0 14px 32px -16px rgba(18, 18, 18, 0.28);
  --tm-shadow-lg: 0 26px 60px -26px rgba(18, 18, 18, 0.45);

  --tm-ring: 0 0 0 3px rgba(254, 217, 46, 0.55);
  --tm-ring-dark: 0 0 0 3px rgba(18, 18, 18, 0.28);

  --tm-t: 170ms cubic-bezier(0.4, 0, 0.2, 1);

  --tm-z-header: 60;
  --tm-z-drawer: 80;
  --tm-z-toast: 95;
}

@media (max-width: 900px) {
  :root {
    /* Hauteurs relevées sur la maquette mobile (cadre 326 px → 390 px) */
    --tm-topbar-h: 38px;
    --tm-header-h: 60px;
    --tm-section-y: 40px;
  }
}