/* ==========================================================================
   DESIGN TOKENS — change the look of the whole site from this one file.

   All variables start with --lhdk- so they never clash with plugins
   (Elementor, WooCommerce …) that define their own --color-* variables.

   Breakpoints (CSS variables can't be used inside @media, so these are
   the fixed values used across all CSS files — search for them):
     1024px  tablet      (grids go from 3 → 2 columns)
      900px  navigation  (menu becomes the slide-in panel)
      640px  mobile      (everything stacks)
   ========================================================================== */

:root {
	/* ---- Colours ------------------------------------------------------- */
	--lhdk-color-ink:          #14120f;  /* darkest: hero, footer, dark buttons */
	--lhdk-color-text:         #1a1713;  /* headings + body text */
	--lhdk-color-text-soft:    #3a342c;  /* long-form article text */
	--lhdk-color-muted:        #7a736a;  /* secondary text, captions */
	--lhdk-color-background:   #f4f2ed;  /* page background (warm cream) */
	--lhdk-color-surface:      #fbfaf7;  /* cards, popups */
	--lhdk-color-surface-alt:  #ece8e0;  /* alternate section background */
	--lhdk-color-footer:       #0d0c0a;
	--lhdk-color-primary:      #e3c89c;  /* gold — main buttons */
	--lhdk-color-primary-hover:#ecd6ac;
	--lhdk-color-accent:       #b08a4f;  /* dark gold — links on hover, icons, rules */
	--lhdk-color-accent-soft:  #d8c7a8;  /* eyebrows on dark backgrounds */
	--lhdk-color-on-dark:      #f7f4ee;  /* text on dark backgrounds */
	--lhdk-color-on-dark-soft: rgba(240, 235, 226, 0.72);
	--lhdk-color-border:       rgba(20, 18, 15, 0.1);
	--lhdk-color-border-dark:  rgba(247, 244, 238, 0.16);
	--lhdk-color-icon:         var(--lhdk-color-accent);
	--lhdk-color-success:      #1e6b2e;
	--lhdk-color-error:        #9b1c1c;
	--lhdk-overlay:            linear-gradient(90deg, rgba(12, 11, 9, 0.94) 0%, rgba(12, 11, 9, 0.78) 34%, rgba(12, 11, 9, 0.25) 66%, rgba(12, 11, 9, 0.1) 100%);
	--lhdk-overlay-bottom:     linear-gradient(180deg, rgba(12, 11, 9, 0.1) 0%, rgba(12, 11, 9, 0.85) 100%);

	/* ---- Typography ---------------------------------------------------- */
	--lhdk-font-heading: "Playfair Display", Georgia, "Times New Roman", serif;
	--lhdk-font-body:    "Jost", system-ui, -apple-system, "Segoe UI", sans-serif;

	--lhdk-font-size-display: clamp(2.4rem, 4.4vw, 3.9rem);   /* home hero */
	--lhdk-font-size-h1:      clamp(2rem, 3.8vw, 3.25rem);
	--lhdk-font-size-h2:      clamp(1.75rem, 3vw, 2.5rem);
	--lhdk-font-size-h3:      1.0625rem;
	--lhdk-font-size-body:    1rem;
	--lhdk-font-size-lead:    1.0625rem;  /* intro paragraphs */
	--lhdk-font-size-small:   0.875rem;
	--lhdk-font-size-xs:      0.75rem;
	--lhdk-font-size-eyebrow: 0.6875rem;

	--lhdk-font-weight-light:   300;
	--lhdk-font-weight-normal:  400;
	--lhdk-font-weight-medium:  500;
	--lhdk-font-weight-heading: 400;

	--lhdk-line-height-heading: 1.15;
	--lhdk-line-height-body:    1.75;
	--lhdk-letter-spacing-eyebrow: 0.26em;

	/* ---- Layout -------------------------------------------------------- */
	--lhdk-container-width:  1280px;
	--lhdk-content-width:    760px;   /* readable text column */
	--lhdk-gutter:           clamp(20px, 4vw, 40px);  /* left/right page padding */
	--lhdk-header-height:    78px;

	/* ---- Spacing ------------------------------------------------------- */
	--lhdk-space-2xs: 0.25rem;
	--lhdk-space-xs:  0.5rem;
	--lhdk-space-sm:  1rem;
	--lhdk-space-md:  1.5rem;
	--lhdk-space-lg:  2.5rem;
	--lhdk-space-xl:  4rem;
	--lhdk-space-section: clamp(4rem, 8vw, 7rem);  /* vertical padding of sections */

	/* ---- Shape & depth ------------------------------------------------- */
	--lhdk-radius-sm:   4px;
	--lhdk-radius-md:   10px;
	--lhdk-radius-lg:   18px;
	--lhdk-radius-pill: 999px;

	--lhdk-shadow-sm: 0 4px 14px rgba(20, 18, 15, 0.06);
	--lhdk-shadow-md: 0 14px 34px rgba(20, 18, 15, 0.12);
	--lhdk-shadow-lg: 0 30px 70px rgba(20, 18, 15, 0.28);

	/* ---- Buttons ------------------------------------------------------- */
	--lhdk-button-radius:   var(--lhdk-radius-pill);
	--lhdk-button-padding:  1rem 1.5rem;
	--lhdk-button-font-size: 0.875rem;

	/* ---- Motion -------------------------------------------------------- */
	--lhdk-ease:     cubic-bezier(0.22, 1, 0.36, 1);
	--lhdk-duration: 0.35s;

	/* ---- Layers -------------------------------------------------------- */
	--lhdk-z-header: 60;
	--lhdk-z-nav:    80;
	--lhdk-z-modal:  100;
}