/* ==========================================================================
   L'ORÉE DU PALM — DESIGN TOKENS (v4 « précision minérale »)
   Porcelaine chaude + pierre/sable + vert palm profond + bronze champagne.
   Encre quasi-noire, filets affinés : le contraste vient de la typographie,
   pas de la couleur. Source de vérité unique — recolore et rythme tout le site.
   ========================================================================== */

:root {
  /* --- PALETTE « TRAVERTIN » (Aman / galerie d'art / calcaire) --------
     Aucun jaune, aucun beige orangé, aucun doré brillant. */
  --c-bg:            #F7F5F1;   /* blanc chaud — fond principal */
  --c-bg-warm:       #EDE9E1;   /* beige clair — sections alternées */
  --c-ink:           #25404B;   /* ★ CHARTE — bleu-vert profond : titres, logo, éléments majeurs */
  --c-ink-soft:      #6A7378;   /* bleu-gris désaturé — texte secondaire */
  --c-gold:          #C06648;   /* ★ CHARTE — terracotta : accent, soulignements, pictos */
  --c-gold-dark:     #A5502F;   /* terracotta foncé — hover */
  --c-sand:          #DBD5CE;   /* charte — beige champagne */
  --c-ivory:         #FBFAF8;   /* blanc cassé — voiles clairs */
  --c-palm:          #858C80;   /* charte — vert palmier */
  --c-palm-dark:     #6B7266;
  --c-stone:         #B7AB9C;   /* charte — beige brun */
  --c-sienne:        #9E8D75;   /* charte — terre sienne */
  --c-ocre:          #B0B5AC;   /* charte — ocre */
  --c-teal:          #25404B;   /* charte — bleu-vert profond : sections sombres */
  --c-black:         #1A2A31;   /* bleu-vert quasi noir */
  --c-white:         #FFFFFF;
  --c-line:          #E3DDD4;   /* filets très fins */
  --c-overlay:       rgba(37,64,75,.46);  /* voile images (bleu-vert charte) */

  /* --- STATUTS MASTERPLAN (teintes naturelles, désaturées) ----------- */
  --c-status-available: #5E7B62;  /* vert palmier lisible — disponible */
  --c-status-option:    #B08A4E;  /* ocre chaud — en option */
  --c-status-reserved:  #C06648;  /* terracotta charte — réservé */
  --c-status-sold:      #B7AB9C;  /* beige brun charte — vendu */

  /* ==================================================================
     TYPOGRAPHIE — CHARTE GRAPHIQUE L'ORÉE DU PALM
     ------------------------------------------------------------------
     PRIMARY   : Poppins      -> police PRINCIPALE du site
                 (corps, boutons, navigation, labels, H4/H5/H6).
     SECONDARY : Josefin Slab -> UNIQUEMENT titres principaux (H1/H2/H3)
                 et éléments de mise en avant (chiffres clés, prix).
     Graisses : 400 texte · 500 sous-titres · 600 boutons · 700 titres.
     Aucune autre police ne doit être introduite.
     ================================================================== */
  --font-primary:   "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-secondary: "Josefin Slab", Georgia, serif;

  /* Alias rétro-compatibles (utilisés dans tout le thème) */
  --font-body:    var(--font-primary);
  --font-display: var(--font-secondary);   /* titres principaux + mises en avant */
  --font-accent:  var(--font-secondary);

  /* Graisses officielles */
  --fw-regular:   400;   /* texte courant */
  --fw-medium:    500;   /* sous-titres, navigation */
  --fw-semibold:  600;   /* boutons, éléments importants */
  --fw-bold:      700;   /* titres */

  /* --- ÉCHELLE TYPO (desktop) — en rem, base 16 px -----------------
     Redéfinie plus bas en tablette (<=1024px) et mobile (<=640px). */
  --fs-display: 4.5rem;      /* 72px — hero XXL */
  --fs-h1:      3.5rem;      /* 56px */
  --fs-h2:      2.75rem;     /* 44px */
  --fs-h3:      2.125rem;    /* 34px */
  --fs-h4:      1.75rem;     /* 28px */
  --fs-h5:      1.375rem;    /* 22px */
  --fs-h6:      1.125rem;    /* 18px */
  --fs-body:    1.125rem;    /* 18px */
  --fs-lead:    1.25rem;     /* 20px */
  --fs-btn:     1rem;        /* 16px */
  --fs-small:   .9375rem;    /* 15px */
  --fs-caption: .8125rem;    /* 13px */

  /* --- INTERLIGNES ------------------------------------------------- */
  --lh-tight:  1.1;      /* grands titres */
  --lh-snug:   1.25;     /* titres courants */
  --lh-normal: 1.7;      /* corps de texte : lisibilité (cible 1.6–1.8) */

  --ls-display: -0.01em;
  --ls-caption: 0.24em;   /* surtitres : capitales très espacées */

  /* --- ESPACEMENT (échelle 4px, généreux) --------------------------- */
  --sp-3xs:  .25rem;
  --sp-2xs:  .5rem;
  --sp-xs:   .75rem;
  --sp-sm:   1rem;
  --sp-md:   1.5rem;
  --sp-lg:   2.5rem;
  --sp-xl:   4rem;
  --sp-2xl:  4.5rem;
  --sp-3xl:  7rem;
  --section-y: clamp(3.25rem, 2rem + 3.2vw, 5.5rem);  /* respiration mesurée */

  /* --- LAYOUT -------------------------------------------------------- */
  --container:      1280px;
  --container-wide: 1560px;
  --container-text: 680px;    /* largeur de lecture éditoriale */
  --gutter:         clamp(1.5rem, .8rem + 3vw, 3.5rem);

  /* --- RADIUS (courbes douces — 18 px sur les cartes, capsules CTA) -- */
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   18px;
  --r-xl:   28px;
  --r-pill: 999px;

  /* --- OMBRES (extrêmement diffuses, presque invisibles) ------------- */
  --sh-xs: 0 1px 2px rgba(31,31,28,.04);
  --sh-sm: 0 10px 30px rgba(31,31,28,.05);
  --sh-md: 0 30px 90px rgba(31,31,28,.05);
  --sh-lg: 0 40px 110px rgba(31,31,28,.08);
  --sh-gold: 0 14px 36px rgba(192,102,72,.16);

  /* --- MOTION (lent, naturel) --------------------------------------- */
  --ease-out:    cubic-bezier(.22,.61,.36,1);
  --ease-inout:  cubic-bezier(.65,.05,.36,1);
  --ease-expo:   cubic-bezier(.16,1,.3,1);
  --dur-fast:    .3s;
  --dur-base:    .6s;
  --dur-slow:    1.1s;

  /* --- Z-INDEX ------------------------------------------------------- */
  --z-header:  100;
  --z-overlay: 200;
  --z-modal:   300;
  --z-tooltip: 400;
}

/* ==========================================================================
   ÉCHELLE TYPOGRAPHIQUE RESPONSIVE (charte)
   Une seule source : on redéfinit les variables, tout le site suit.
   ========================================================================== */

/* --- TABLETTE (<= 1024px) ------------------------------------------ */
@media (max-width: 1024px) {
  :root {
    --fs-display: 3rem;        /* 48px */
    --fs-h1:      2.5rem;      /* 40px */
    --fs-h2:      2.125rem;    /* 34px */
    --fs-h3:      1.75rem;     /* 28px */
    --fs-h4:      1.625rem;    /* 26px */
    --fs-h5:      1.3125rem;   /* 21px */
    --fs-h6:      1.0625rem;   /* 17px */
    --fs-body:    1.0625rem;   /* 17px */
    --fs-lead:    1.1875rem;   /* 19px */
  }
}

/* --- MOBILE (<= 640px) --------------------------------------------- */
@media (max-width: 640px) {
  :root {
    --fs-display: 2.25rem;     /* 36px */
    --fs-h1:      2rem;        /* 32px */
    --fs-h2:      1.75rem;     /* 28px */
    --fs-h3:      1.5rem;      /* 24px */
    --fs-h4:      1.375rem;    /* 22px */
    --fs-h5:      1.1875rem;   /* 19px */
    --fs-h6:      1rem;        /* 16px */
    --fs-body:    1rem;        /* 16px */
    --fs-lead:    1.125rem;    /* 18px */
  }
}