/*
Theme Name: Palm Estate
Theme URI: https://palmestate.ae
Author: Alia Roberts
Author URI: https://palmestate.ae
Description: Custom WordPress theme for Palm Estate, Dubai. Property sales, rentals, investment and holiday stays on the Palm.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: palm-estate
Tags: real-estate, custom-menu, featured-images, translation-ready, responsive
*/

/* ==========================================================================
   Design tokens
   --------------------------------------------------------------------------
   The single source of truth for the build. Every colour, size, space and
   duration used anywhere in the theme resolves back to a variable declared
   here. No hardcoded hex outside this block.

   Layout, reset and typography live in assets/css/main.css.
   ========================================================================== */

:root {

	/* ---- Brand colours -------------------------------------------------
	   Locked from the Palm Estate design system. Do not add to or alter
	   these six values; add a semantic alias below instead. */

	--pe-forest: #0D211A;
	--pe-pine:   #153C34;
	--pe-deep:   #071610;
	--pe-cream:  #F4F1E8;
	--pe-bronze: #C6A87E;
	--pe-ink:    #142A20;

	/* ---- Semantic aliases ----------------------------------------------
	   Components reference these, not the brand names, so a palette change
	   is a one-line edit. */

	--pe-bg:            var(--pe-cream);
	--pe-bg-dark:       var(--pe-forest);
	--pe-bg-darkest:    var(--pe-deep);
	--pe-surface-dark:  var(--pe-pine);

	--pe-text:          var(--pe-ink);
	--pe-text-on-dark:  var(--pe-cream);
	--pe-text-muted:    color-mix(in srgb, var(--pe-ink) 65%, var(--pe-cream));
	--pe-text-muted-on-dark: color-mix(in srgb, var(--pe-cream) 60%, transparent);  /* 6.12:1 on Forest */
	--pe-text-on-accent: var(--pe-ink);

	--pe-accent:        var(--pe-bronze);
	--pe-accent-quiet:  color-mix(in srgb, var(--pe-bronze) 55%, transparent);

	/* Bronze TEXT on a Cream ground measures 2.00:1, which fails even the
	   3:1 large-text threshold, so accent text on light uses this darkened
	   mix instead: 4.91:1, passing for body size and up. Rules, dots and
	   other decoration carry no contrast requirement and stay pure Bronze.
	   On dark grounds Bronze is already 7.45:1 and is used as-is. */
	--pe-accent-on-light: color-mix(in srgb, var(--pe-bronze) 50%, var(--pe-ink));

	/* Hairline rules and grid lines, on light and dark grounds. */
	--pe-rule:          color-mix(in srgb, var(--pe-ink) 15%, transparent);
	--pe-rule-on-dark:  color-mix(in srgb, var(--pe-cream) 18%, transparent);
	--pe-rule-accent:   color-mix(in srgb, var(--pe-bronze) 40%, transparent);

	/* ---- Form error ------------------------------------------------------
	   NOT one of the six locked colours. The palette has no error hue, and
	   form validation needs one that reads as a problem rather than as
	   decoration - Bronze cannot do that job while it is also the label and
	   focus colour. This is a muted terracotta chosen to sit with the
	   palette rather than shout over it. Needs a decision: keep, replace
	   with a brand-approved value, or drop in favour of an icon and text. */
	--pe-error: #B4533C;

	/* The error colour as TEXT on a dark ground. --pe-error itself measures
	   3.40:1 on Forest - enough for an underline (3:1 for non-text) but not
	   for a message (4.5:1) - so messages lift it toward Cream: 5.08:1. */
	--pe-error-on-dark: color-mix(in srgb, var(--pe-error) 75%, var(--pe-cream));

	/* ---- Type families -------------------------------------------------
	   --font-display carries the luxury feel: every heading, stat numeral
	   and pull quote. --font-body is Jost for everything else.

	   NOTE: the display serif is not yet licensed or named (client blocker).
	   Until the woff2 lands, 'Palm Serif' does not resolve and the stack
	   falls through to Georgia, which is metrically close enough to lay out
	   against. See the @font-face block in assets/css/main.css. */

	--font-display: 'Palm Serif', Georgia, 'Times New Roman', Times, serif;
	--font-body:    'Jost', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

	/* ---- Type scale ----------------------------------------------------
	   Fluid from the sm breakpoint up, so there is no step change at a
	   media query. Fixed below --fs-lg: small text should not scale. */

	--fs-3xs:     0.625rem;   /* 10px - the nav pill only */
	--fs-2xs:     0.6875rem;  /* 11px - small-caps labels */
	--fs-xs:      0.75rem;    /* 12px - eyebrows, meta */
	--fs-sm:      0.875rem;   /* 14px - nav, captions, form labels */
	--fs-base:    1rem;       /* 16px - body */
	--fs-md:      1.0625rem;  /* 17px - lead body */
	--fs-lg:      1.25rem;    /* 20px - sub copy */
	--fs-xl:      clamp(1.375rem, 1.10rem + 0.9vw,  1.75rem);
	--fs-2xl:     clamp(1.75rem,  1.30rem + 1.8vw,  2.50rem);
	--fs-3xl:     clamp(2.25rem,  1.60rem + 2.8vw,  3.50rem);
	--fs-display: clamp(2.50rem,  1.50rem + 4.4vw,  4.50rem);

	/* ---- Line height / tracking ---------------------------------------- */

	--lh-tight: 1.08;   /* display headlines */
	--lh-snug:  1.25;   /* headings */
	--lh-base:  1.65;   /* body */
	--lh-loose: 1.85;   /* generous measure blocks */

	--ls-tight:  -0.02em;
	--ls-normal:  0;
	--ls-wide:    0.08em;
	--ls-caps:    0.16em;  /* BUY - SELL - INVEST - STAY */

	/* ---- Spacing scale -------------------------------------------------
	   4px base. Use these, not arbitrary rem values. */

	--space-3xs: 0.25rem;  /*   4px */
	--space-2xs: 0.5rem;   /*   8px */
	--space-xs:  0.75rem;  /*  12px */
	--space-sm:  1rem;     /*  16px */
	--space-md:  1.5rem;   /*  24px */
	--space-lg:  2rem;     /*  32px */
	--space-xl:  3rem;     /*  48px */
	--space-2xl: 4rem;     /*  64px */
	--space-3xl: 6rem;     /*  96px */
	--space-4xl: 8rem;     /* 128px */

	/* Vertical rhythm between full-width sections. */
	--space-section: clamp(4rem, 8vw, 8rem);

	/* ---- Layout --------------------------------------------------------- */

	/* From tablet width up the container is proportional - its content spans
	   71% of the viewport, as the design draws every section - and this fixed
	   value only applies below that (main.css, section 08). */
	--container-max:    1280px;
	--container-narrow: 880px;
	--container-text:   680px;
	--gutter:           clamp(1.25rem, 4vw, 3rem);

	--measure:        68ch;  /* comfortable body column */
	--measure-narrow: 46ch;  /* hero sub copy, centred blocks */

	/* Floating nav bar, proportional to the viewport: about 50% wide, 3.6%
	   tall, 2.4% down. The design drew it at 56% / 4.2% / 3.3%; it was brought
	   up and in a notch on request. Floors keep it usable on small screens;
	   caps stop it growing past its largest size. Everything that clears the
	   header - page bands, sticky cards, anchor jumps - reads these tokens. */
	--header-h:      clamp(3.125rem, 3.6vw, 4.375rem);
	--header-offset: clamp(var(--space-xs), 2.4vw, var(--space-xl));
	--header-w:      clamp(60rem, 60vw, 72rem);
	--header-pad:    clamp(var(--space-md), 2vw, var(--space-xl));
	--hairline: 1px;

	--radius-md:   0.75rem;
	--radius-pill: 999px;

	--blur-glass: 12px;  /* backdrop blur behind the floating nav over the hero */

	/* ---- Breakpoints ----------------------------------------------------
	   Declared for reference and for JS to read via getComputedStyle.

	   CSS custom properties do NOT work inside a media condition, so these
	   are repeated as literals in section 08 of assets/css/main.css. That
	   section is the one that actually takes effect; if a value changes
	   here, change it there too. */

	--bp-lg: 1024px;
	--bp-md: 768px;
	--bp-sm: 480px;

	/* ---- Colour grade ---------------------------------------------------
	   Overlays that pull the raw renders into the palette; applied as CSS
	   in home.css, never baked into the files. The wash blend is a token so
	   plain alpha and multiply can be compared with a one-word change:
	   multiply deepens shadows rather than greying the whole image. */

	--grade-wash:       color-mix(in srgb, var(--pe-forest) 35%, transparent);  /* was 45%; lightened on request, see .hero__media in home.css for the contrast it has to keep */
	--grade-wash-blend: normal;  /* normal | multiply */

	/* ---- Motion ---------------------------------------------------------
	   One easing curve across the whole build, per the polish phase. */

	/* One easing curve for the whole site: a gentle ease-out. --ease-out is
	   kept as a name so older rules read it, and is the same curve. */
	--ease:      cubic-bezier(0.22, 0.61, 0.36, 1);
	--ease-out:  var(--ease);
	--dur-fast:  220ms;  /* hovers, links, buttons, the accordion icon */
	--dur-base:  320ms;
	--dur-slow:  640ms;

	/* ---- Stacking order -------------------------------------------------
	   Named so nothing ends up as z-index: 9999. */

	--z-base:    1;
	--z-overlay: 10;   /* vignettes, image scrims */
	--z-header:  100;
	--z-nav:     110;  /* mobile nav overlay, above the header */
	--z-float:   120;  /* WhatsApp float */
	--z-skip:    200;  /* skip link, above everything */
}