/*
Theme Name:   Hammam Sables d’Or
Theme URI:    https://www.hammam-sables-dor.fr/
Description:  Design system for Hammam Sables d’Or — a privatised Moroccan hammam in
              Moselle. Child theme of Hello Elementor. Carries the "vapeur nocturne" art
              direction (palette, self-hosted type, photo grading, the steam reveal) as
              code, so that editing pages in Elementor cannot drift the brand.
              Page content is built in Elementor; the look lives here.
Author:       EdgeSoft Technologies
Template:     hello-elementor
Version:      1.1.0
Requires PHP: 7.4
Text Domain:  hammam-toumi
*/

/* ==========================================================================
   Hammam Sables d’Or — Design tokens
   Direction: "Vapeur nocturne" — warm near-black, brass, carved stone.

   Every value the design depends on lives here. When this becomes a
   WordPress theme, this file maps to theme.json / style.css :root.
   Nothing below this file should hard-code a colour, a size or a duration.
   ========================================================================== */

:root {
  /* ---- Colour ------------------------------------------------------------
     Contrast against --ht-ground:
       steam 15.1:1 · brass 8.9:1 · muted 5.9:1 · clay 4.6:1 (large text only)
     -------------------------------------------------------------------- */
  --ht-ground: #12100e; /* page background — warm near-black */
  --ht-ground-deep: #0b0a08; /* letterbox, hero base, footer */
  --ht-surface: #1c1815; /* raised panels */
  --ht-surface-2: #241f1a; /* hover / nested surface */

  --ht-brass: #c9a227; /* accents, hairlines, primary action */
  --ht-brass-lift: #dfb943; /* brass hover */
  --ht-clay: #8c5a3c; /* secondary warmth */

  --ht-steam: #e8e0d5; /* headings + body */
  --ht-muted: #9a9086; /* captions, meta, secondary copy */
  --ht-stone: #9b8b7a; /* brand-kit neutral. 4.9:1 on --ht-ground, so it is
                          safe for body copy as well as captions. Recorded here
                          because this file is the design-system record; nothing
                          uses it yet — --ht-muted still carries secondary copy
                          and the two are close enough that swapping wholesale
                          would be churn without a reason. */

  --ht-line: rgb(232 224 213 / 0.12); /* neutral hairline */
  --ht-line-brass: rgb(201 162 39 / 0.32); /* brass hairline */
  --ht-veil: rgb(11 10 8 / 0.72); /* scrim over photography */

  /* ---- Type --------------------------------------------------------------
     Three faces, three jobs. Marcellus is inscriptional Roman — it reads as
     carved stone, which is what the hammam is built from. Cormorant appears
     once per page at most, italic, for the one breathed line. Inter does all
     the work nobody should notice.
     -------------------------------------------------------------------- */
  --ht-font-display: "Marcellus", "Optima", "Palatino Linotype", Palatino, Georgia, serif;
  --ht-font-quote: "Cormorant Garamond", Garamond, Georgia, serif;
  --ht-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --ht-t-xs: clamp(0.72rem, 0.7rem + 0.1vw, 0.78rem);
  --ht-t-sm: clamp(0.84rem, 0.82rem + 0.1vw, 0.9rem);
  --ht-t-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --ht-t-md: clamp(1.125rem, 1.05rem + 0.35vw, 1.3rem);
  --ht-t-lg: clamp(1.5rem, 1.3rem + 0.9vw, 2rem);
  --ht-t-xl: clamp(2rem, 1.6rem + 1.9vw, 3.25rem);
  --ht-t-2xl: clamp(2.6rem, 1.9rem + 3.4vw, 5rem);
  --ht-t-3xl: clamp(3rem, 1.9rem + 5.4vw, 7rem);

  --ht-lh-tight: 1.06;
  --ht-lh-snug: 1.25;
  --ht-lh-body: 1.72;

  /* Wide tracking is the whole personality of the eyebrow labels. */
  --ht-track-eyebrow: 0.32em;
  --ht-track-display: 0.01em;

  /* ---- Space -------------------------------------------------------------
     8px base. --ht-section is the vertical breathing room between bands and
     is the single most important number on the site.
     -------------------------------------------------------------------- */
  --ht-s-1: 0.5rem;
  --ht-s-2: 1rem;
  --ht-s-3: 1.5rem;
  --ht-s-4: 2rem;
  --ht-s-5: 3rem;
  --ht-s-6: 4rem;
  --ht-s-7: 6rem;
  --ht-s-8: 8rem;

  --ht-section: clamp(5.5rem, 12vw, 11rem);
  --ht-gutter: clamp(1.25rem, 5vw, 4rem);
  --ht-max: 1320px;
  --ht-measure: 62ch; /* readable line length ceiling */
  --ht-measure-narrow: 46ch;

  --ht-header-h: 4.75rem;

  /* ---- Motion ------------------------------------------------------------
     One easing curve, three durations. The signature gesture is the steam
     reveal: text resolving out of blur. See components.css → .ht-steam-in.
     -------------------------------------------------------------------- */
  --ht-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ht-dur-fast: 260ms;
  --ht-dur: 800ms;
  --ht-dur-slow: 1100ms;
  --ht-kenburns: 26s;

  /* ---- Photography -------------------------------------------------------
     The source images are unretouched phone photographs. Grading them here
     rather than baking it into the files means one place to tune, and one
     line to delete the day a professional shoot arrives.
     -------------------------------------------------------------------- */
  /* Re-graded for the retouched photography.

     The previous values — saturate(0.4) sepia(0.24) under a vignette reaching
     70% black — were built to disguise eight unrelated phone snaps: collapsing
     the green door, the red rug and the grey marble into one tonal family was
     the only way to make them look deliberate. That grade earned its keep
     against bad source, and actively destroys good source: it mutes the brass
     fittings, the planting, and the warm under-bench light that the new images
     were shot for.

     So it now does the smallest job that still makes the set cohere — a slight
     desaturation and a trace of warmth — instead of hiding what is in frame.
     If a photograph needs the old treatment to look acceptable, the answer is
     a better photograph, not a heavier filter. */
  --ht-photo-filter: saturate(0.88) contrast(1.02) brightness(0.98) sepia(0.05);
  --ht-photo-filter-soft: saturate(0.95) contrast(1.01) brightness(1) sepia(0.03);
  --ht-photo-vignette: radial-gradient(
    ellipse 130% 100% at 50% 45%,
    transparent 55%,
    rgb(11 10 8 / 0.16) 88%,
    rgb(11 10 8 / 0.34) 100%
  );
  --ht-photo-warm: linear-gradient(
    180deg,
    rgb(140 90 60 / 0.04) 0%,
    rgb(18 16 14 / 0.06) 55%,
    rgb(11 10 8 / 0.28) 100%
  );

  --ht-radius: 2px; /* almost none — stone is cut, not moulded */

  /* ---- Stacking ----------------------------------------------------------
     Four layers, deliberately ordered:

       float  90  persistent floating CTA — above all page content (which
                  never exceeds 2) and BELOW the mobile drawer, so opening
                  the menu covers it without a line of JavaScript.
       header 99  .ht-mobilenav (fixed, inset 0, opaque) sits at header - 1
       header 100 the fixed bar itself
       skip   110 header + 10, so the skip link beats the bar it jumps past

     --ht-z-dialog is effectively belt-and-braces: booking.js opens the
     dialog with showModal(), which promotes it to the browser's top layer
     and puts it above every z-index on the page regardless of this value.
     -------------------------------------------------------------------- */
  --ht-z-float: 90;
  --ht-z-header: 100;
  --ht-z-dialog: 200;
}