/* ==========================================================================
   KH Haircare — design tokens
   Single source of truth for colour, type, spacing and motion.
   Never hardcode a hex value or a px font-size anywhere else in this project.
   If a value is missing, add a token here first, then reference it.
   ========================================================================== */

:root{
  --kh-espresso:#5A4436;
  --kh-mocha:#A98466;
  --kh-sand:#F5E3D3;
  --kh-cream:#FFEFE5;          /* the logo's own background */
  --kh-blush:#FBF6F1;          /* alternating section background */
  --kh-ivory:#FFFFFF;
  --kh-copper:#CC865B;         /* sampled from the logo mark */
  --kh-copper-deep:#A6431E;    /* hover / emphasis */
  --kh-gold:#C9A227;
  --kh-ink:#241A14;
  --kh-muted:#6E5E52;
  --kh-line:rgba(90,68,54,.16);
  --kh-hairline:rgba(197,136,92,.28);
  --kh-press:rgba(90,68,54,.18);    /* the hard edge under a pressable face */
  --kh-veil:rgba(197,136,92,.10);   /* warm overlay on imagery */
  --kh-veil-soft:rgba(197,136,92,.08);

  /* The home-page hero video on desktop. The veil warms the footage and
     settles it behind the portrait while leaving it clearly readable: about
     a fifth of cream, a little more at the top where it meets the header.
     Below 1024px the video carries no veil at all — see MOBILE in layout.css. */
  --hero-veil-top:color-mix(in srgb, var(--kh-cream) 25%, transparent);
  --hero-veil-bottom:color-mix(in srgb, var(--kh-cream) 20%, transparent);

  /* "Book an appointment." The shine is a wide warm-gold band with a
     near-cream core sweeping over the copper-deep text; the glow is a gold
     halo that swells as it crosses — see .hero__accent in layout.css. */
  --kh-shine-gold:color-mix(in srgb, var(--kh-gold) 70%, var(--kh-cream));
  --kh-shine-peak:color-mix(in srgb, var(--kh-cream) 75%, var(--kh-gold));
  --kh-glow:color-mix(in srgb, var(--kh-gold) 55%, transparent);

  /* The "See more" card at the end of the home-page band: blush at rest,
     warming part of the way to sand under the pointer. */
  --kh-more-hover:color-mix(in srgb, var(--kh-sand) 55%, var(--kh-blush));

  /* The hovered nav pill: light enough that it never competes with the copper
     of the active one. The bar itself has no fill — it sits on the header's
     own cream. */
  --kh-nav-hover:color-mix(in srgb, var(--kh-sand) 60%, transparent);

  --font-display:"Playfair Display","Cormorant Garamond",serif;
  --font-body:"Jost","Poppins",system-ui,sans-serif;
  --font-ar:"Almarai","Tajawal",sans-serif;

  --step--1:clamp(.78rem,.74rem + .2vw,.88rem);
  --step-0:clamp(.95rem,.9rem + .25vw,1.05rem);
  --step-1:clamp(1.25rem,1.1rem + .7vw,1.6rem);
  --step-2:clamp(1.8rem,1.4rem + 1.8vw,2.8rem);
  --step-3:clamp(2.6rem,1.8rem + 3.6vw,4.6rem);

  --wrap:1180px;
  --gutter:clamp(1.2rem,4vw,3.5rem);
  --header-h:76px;
  --tap-min:44px;        /* smallest tap target on a phone */
  --band-fade:10%;       /* cream seam depth at the top and bottom of an image band */
  --gallery-fade:14%;    /* the home-page strip runs a slightly deeper seam */
  --icon-sm:18px;        /* inline SVG mark sitting beside a button label */
  --footer-logo:38px;    /* KH mark at the start of the site footer */
  --portrait:180px;      /* about-page portrait, tablet and desktop */
  --portrait-sm:120px;   /* about-page portrait, phones */
  --measure:34rem;       /* label/value block width before it stops growing */
  --prose:70ch;          /* running text on the legal pages */
  --field:32rem;         /* form column width before it stops growing */
  --star:20px;           /* star in a review card's rating */
  --star-input:34px;     /* star in the rating control on the review form */
  --checkbox:20px;       /* native checkbox on the booking form */
  --thumb:96px;          /* photo thumbnail beside the review form */
  --date-card:74px;      /* one day in the booking date strip */
  --date-card-h:88px;    /* and its height, so the fourteen cards stay square-ish */
  --country:11rem;       /* country selector beside the WhatsApp number */
  --intro-logo:88px;     /* KH mark centred on the home-page intro curtain */
  --intro-lift:12px;     /* how far that mark drifts up as it leaves */
  --hero-portrait:340px;     /* arched portrait over the video, desktop cap */
  /* Below 1024px the hero stacks: the video alone on top, the portrait
     straddling its bottom edge, the copy on cream underneath.

     The clip is 9:16 and its top third is bare wall. What has to stay in
     frame — his face, his hands in the hair, the client's head — is a band
     from about 36% to 84% of its height, and a box shows the more of that
     band the taller it is for its width. So the video takes
     --hero-video-share of the space under the header, grows toward
     --hero-video-band of the viewport width (the band's .48 of the frame,
     times 16/9) where the screen is wide for its height, and never more
     than --hero-video-share-max of the space. It is framed low
     (--hero-video-y), which centres on that band. --hero-video-fade is the
     soft seam into the cream at its foot. A phone on its side has the
     height for no more than a strip: --hero-video-share-flat. */
  --hero-video-share:.56;
  --hero-video-share-max:.66;
  --hero-video-share-flat:.35;
  --hero-video-band:.85;
  --hero-video-y:75%;
  --hero-video-fade:8%;
  /* On a short screen it is the portrait that gives way first (the svh
     term), so the copy stays above the fold. */
  --hero-portrait-stack:min(30vw, 140px, 17svh);
  --hero-stack-gap:clamp(.5rem,1.6svh,1rem);   /* portrait to title */
  --hero-title-sm:clamp(1.9rem,1.35rem + 2.6vw,2.8rem);  /* hero h1 below 1024px */
  --accent-rise:14px;    /* the accent line's own lift inside the hero entrance */
  --accent-rule:1px;     /* the copper underline drawn under it */
  /* The phone hero's scroll effect. The media stays pinned for a run of
     --hero-rise of a screen while the copy scrolls on; it is gone by
     --hero-fade-end of that run, having risen the same --hero-rise of a
     screen — a touch faster than the copy, so it lifts away from it — and
     shrunk by --hero-shrink. */
  --hero-fade-end:.9;
  --hero-rise:.2;
  --hero-shrink:.08;
  --book-tuck:6px;       /* the header Book's lift as it steps aside */
  --glint-cycle:3s;      /* one shine sweep plus the pause before the next */
  /* The two galleries. The card width has to stay a share of the viewport
     rather than a capped length: three cards are one full set on the home
     page, and a set narrower than the screen would open a gap where the
     scroll wraps. Overridden per breakpoint on .gallery in layout.css. */
  --gallery-card:34vw;
  --gallery-drift:60s;   /* one full cycle — ambience, not a carousel */
  --gallery-edge:12%;    /* cream seam at the leading and trailing edges */
  /* The home-page band has a real end and drifts to it once. A speed rather
     than a duration: the distance is measured per viewport by main.js, which
     reads this as a plain number of px per second. */
  --gallery-speed:35;
  --more-arrow:32px;     /* arrow on the band's "See more" card */
  --more-nudge:6px;      /* how far it leans toward the end on hover */
  --radius:14px;
  --radius-sm:8px;       /* inner corners: photos, fields, thumbnails */
  --radius-pill:999px;
  --shadow-soft:0 18px 50px rgba(90,68,54,.10);
  /* Press feedback. A hard, blurless edge under the face — flat, not a raised
     3D bevel — that deepens on hover and collapses under the pointer. Any
     pressable surface can shadow these three locally: a face with no
     background of its own has nothing to cast an edge. */
  --press-rest:0 2px 0 var(--kh-press), var(--shadow-soft);
  --press-lift:0 4px 0 var(--kh-press), var(--shadow-soft);
  --press-down:0 1px 0 var(--kh-press), var(--shadow-soft);
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-curtain:cubic-bezier(.7,0,.2,1);   /* intro halves: decelerate as they clear */
}