/* ============================================================
   Willow Real Estate — Design Tokens + Web Fonts
   Ported verbatim from the design handoff (:root of every page).
   Loaded first, before shell.css and any Elementor styles.
   ============================================================ */

/* ---- Licensed webfonts (self-hosted) ---------------------- */
/* NOTE: Forma DJR (Banner + Text) and Richmond Text are LICENSED.
   Confirm the production licence covers web/@font-face use before
   going live. Files live in /assets/fonts of this theme. */
@font-face{font-family:"Forma DJR Banner";src:url('../fonts/FormaDJRBanner-100-normal.ttf') format('truetype');font-weight:100;font-style:normal;font-display:swap;}
@font-face{font-family:"Forma DJR Banner";src:url('../fonts/FormaDJRBanner-200-normal.ttf') format('truetype');font-weight:200;font-style:normal;font-display:swap;}
@font-face{font-family:"Forma DJR Banner";src:url('../fonts/FormaDJRBanner-300-normal.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap;}
@font-face{font-family:"Forma DJR Banner";src:url('../fonts/FormaDJRBanner-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"Forma DJR Banner";src:url('../fonts/FormaDJRBanner-400-italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap;}
@font-face{font-family:"Forma DJR Banner";src:url('../fonts/FormaDJRBanner-500-normal.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:"Forma DJR Banner";src:url('../fonts/FormaDJRBanner-700-normal.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:"Forma DJR Text";src:url('../fonts/FormaDJRText-300-normal.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap;}
@font-face{font-family:"Forma DJR Text";src:url('../fonts/FormaDJRText-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"Forma DJR Text";src:url('../fonts/FormaDJRText-500-normal.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:"Richmond Text";src:url('../fonts/RichmondText.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"Richmond Text";src:url('../fonts/RichmondText-Medium.otf') format('opentype');font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:"Richmond Text";src:url('../fonts/RichmondText-SemiBold.otf') format('opentype');font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:"Richmond Text";src:url('../fonts/RichmondText-Italic.otf') format('opentype');font-weight:400;font-style:italic;font-display:swap;}
@font-face{font-family:"Richmond Display";src:url('../fonts/RichmondDisplay-Light.otf') format('opentype');font-weight:300;font-style:normal;font-display:swap;}
@font-face{font-family:"Richmond Display";src:url('../fonts/RichmondDisplay-Bold.otf') format('opentype');font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:"Richmond Display";src:url('../fonts/RichmondDisplay-Italic.otf') format('opentype');font-weight:400;font-style:italic;font-display:swap;}
/* Light-only alias: this family carries just the Light upright, so applying
   font-style:italic synthesises a light oblique instead of falling back to the
   heavier true Italic face above. Used for the testimonial pull-quotes. */
@font-face{font-family:"Richmond Display Light";src:url('../fonts/RichmondDisplay-Light.otf') format('opentype');font-weight:300;font-style:normal;font-display:swap;}
/* Instrument Serif — used ONLY for the single lead-magnet pull-quote (SIL OFL 1.1, self-hosted). */
@font-face{font-family:"Instrument Serif";src:url('../fonts/InstrumentSerif-italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap;}

:root {
  /* Brand colour system */
  --color-white:     #FFFFFF;
  --color-cream:      #F2EEEB;
  --color-charcoal:   #282018;
  --color-woodsmoke:  #161616;

  /* Functional aliases */
  --color-bg:         var(--color-cream);
  --color-bg-alt:      var(--color-white);
  --color-bg-dark:     var(--color-charcoal);
  --color-bg-darkest:   var(--color-woodsmoke);
  --color-ink:         var(--color-charcoal);
  --color-ink-inverse:   var(--color-cream);
  --color-line:        rgba(40, 32, 24, 0.14);
  --color-line-inverse:  rgba(242, 238, 235, 0.2);

  /* Accent — warm brown, used sparingly for interactive/edit affordances */
  --color-accent: #8a5a3a;

  /* Typography, Forma DJR family */
  --font-banner: "Forma DJR Banner", "Times New Roman", serif;
  --font-text:   "Forma DJR Text", "Helvetica Neue", Arial, sans-serif;
  --font-serif:  "Instrument Serif", "Times New Roman", Georgia, serif; /* pull-quote only */
  --tracking-brand: 0.065em; /* headings */
  --tracking-body:  0.106em; /* body copy */
  --tracking-tight: -0.02em; /* editorial display headlines */
  --tracking-wide:  0.14em; /* eyebrows / labels */

  /* Fluid type scale (clamp: min, preferred-vw, max), scaled down,
     editorial-restrained rather than billboard-large */
  --fs-display: clamp(2.75rem, 1.5rem + 5.4vw, 6.75rem);   /* hero headlines */
  --fs-h1:      clamp(2.25rem, 1.5rem + 3vw, 4.5rem);
  --fs-h2:      clamp(1.75rem, 1.3rem + 2vw, 3.25rem);
  --fs-h3:      clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  --fs-lead:    clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  --fs-body:    clamp(0.9375rem, 0.9rem + 0.15vw, 1rem);
  --fs-small:   clamp(0.75rem, 0.73rem + 0.1vw, 0.8125rem);
  --fs-micro:   0.6875rem;

  /* Spacing scale, generous, editorial whitespace */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-sm:  1.25rem;
  --space-md:  2.25rem;
  --space-lg:  4.5rem;
  --space-xl:  7.5rem;
  --space-2xl: 10.5rem;
  --space-3xl: 15rem;

  /* Layout */
  --container-max:min(2240px, 92vw);
  --gutter: clamp(1.25rem, 4vw, 4rem);

  /* Motion */
  --ease-editorial: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-soft:  cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast:  0.4s;
  --dur-mid:   0.8s;
  --dur-slow:  1.4s;

  /* Header */
  --header-h: 120px;
  --header-h-shrunk: 66px;
}