/* ==========================================================================
   Avenor Park — design tokens
   Every value below was measured from the live site: colours counted in the
   compiled Elementor stylesheet (post-15.css), geometry and type read from
   getComputedStyle at 1440px and 390px. See reference/*-probe.json.
   No other stylesheet may contain a raw hex value.
   ========================================================================== */

:root {
  /* ---- brand ---------------------------------------------------------- */
  --gold: #cba52b;          /* 48 uses in post-15.css — primary accent */
  --teal: #094341;          /* 20 uses — section headings on light bg   */
  --navy: #011f33;          /* sampled from 1920x10000_web.webp, the    */
                            /* textured strip the dark bands come from  */
  --white: #ffffff;
  --black: #000000;
  --marble: #faf9f7;        /* light marble texture, flat equivalent    */

  /* Gold on white is 2.34:1 — it fails WCAG AA for text at any size.
     --gold-ink is the same hue darkened until it passes 4.5:1 on both
     white and the marble background. Use --gold for large display text,
     rules, icons and anything on --navy (7.19:1); use --gold-ink for
     small gold text on light backgrounds, e.g. the 12px eyebrows. */
  --gold-ink: #8a6f1d;

  /* Exact gradient used by the floor-plan pills on the live site. Its mid tone
     is #d4af37, on which white text scores 2.11:1 — an AA failure at 18px. We
     keep the gradient and put --navy on it instead (8.0:1). */
  --gradient-gold: linear-gradient(135deg, #f2d675 0%, #d4af37 50%, #b8860b 100%);

  /* WhatsApp's own brand green. Using anything else on that glyph makes it
     harder to recognise, which is the entire value of the icon. */
  --whatsapp: #25d366;

  /* Social brand colours, so the logos on /contact/ read as the real marks. */
  --brand-instagram: #e1306c;
  --brand-facebook: #1877f2;
  --brand-linkedin: #0a66c2;

  /* Space-separated triplets for rgb(... / alpha) in the pulse keyframes,
     which need the channels rather than a finished colour. */
  --gold-rgb: 203 165 43;
  --gold-ink-rgb: 138 111 29;
  --whatsapp-rgb: 37 211 102;
  --grey-rgb: 209 211 214;    /* light-grey channels for rgb(... / a) frosted glass */

  --ink: #232323;           /* body copy on light backgrounds */
  --ink-muted: #777777;     /* theme default secondary text   */
  /* The same neutral darkened until it clears AA at 13px: --ink-muted measures
     4.48:1 on --white and 4.30:1 on --marble, so it fails on the marble surfaces
     the verify card paints. Use this for small secondary copy on light, and keep
     --ink-muted for the disabled/inert states where low contrast is the point. */
  --ink-soft: #595959;

  /* Form validation. Material's error red, which is what the form was already
     using inline before these were tokens: --danger passes 4.5:1 on --white and
     --marble, --danger-on-dark is the tint that passes on --navy. Nothing in the
     brand palette can do this job — gold is the accent, and an error the visitor
     misses is a lead lost. */
  --danger: #b3261e;
  --danger-on-dark: #ffb4ab;
  --hairline: rgb(203 165 43 / 0.3);   /* gold divider, from post-15.css */

  /* ---- type ----------------------------------------------------------- */
  --font-display: "Gued", "Montserrat", system-ui, sans-serif;
  --font-sans: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-ui: "Outfit", "Montserrat", system-ui, sans-serif;

  --fs-eyebrow: 12px;       /* h4 eyebrows, uppercase, tracked  */
  --fs-eyebrow-lg: 18px;    /* the #overview eyebrow is larger  */
  --fs-body: 15px;
  --fs-body-lg: 16px;
  --fs-nav: 14px;
  --fs-h3: 15px;
  --fs-h2: 24px;
  --fs-h1: 34px;            /* new: the live site ships no h1 at all */

  --lh-tight: 1.3;
  --lh-body: 1.8;           /* 27px at 15px, measured */
  --lh-eyebrow: 26px;

  --tracking: 0.3px;
  --tracking-wide: 0.5px;

  /* ---- space ---------------------------------------------------------- */
  --s-1: 5px;
  --s-2: 10px;
  --s-3: 15px;
  --s-4: 20px;
  --s-5: 30px;
  --s-6: 40px;
  --s-7: 50px;
  --s-8: 60px;
  --s-9: 80px;
  --s-10: 100px;

  --section-pad-y: 60px;    /* measured: padding 60px 100px */
  --section-pad-x: 100px;
  --container-max: 1240px;
  --col-gap: 70px;          /* image right edge 705 -> text start 775 */
  --header-h: 80px;

  /* ---- shape ---------------------------------------------------------- */
  --radius-feature: 80px 80px 15px 15px;  /* the signature image shape */
  --radius-card: 20px;
  --radius-btn: 4px;
  --radius-btn-lg: 10px;
  --radius-sm: 5px;

  /* ---- motion --------------------------------------------------------- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur: 220ms;

  /* ---- background textures -------------------------------------------
     The live site paints its dark bands with a 1920x1000 textured image
     (1920x10000_web.webp, 214 KB). We use --navy flat underneath so the
     section is correct before the texture loads, and never blocks on it. */
  --bg-marble: url("../assets/img/light-marble-with-golden-veins-texture-background-1-scaled-1-1-2-scaled-1920.webp");
  --bg-texture: url("../assets/img/texture-scaled-1920.webp");
}

/* Elementor's breakpoints, so our layout switches where theirs did. */
/* tablet <= 1024px, mobile <= 767px  (declared here for documentation;
   media queries use the literals since custom properties can't be used
   inside @media conditions) */

@media (max-width: 1024px) {
  :root {
    --section-pad-x: 40px;
    --col-gap: 40px;
    --fs-h1: 28px;
  }
}

@media (max-width: 767px) {
  :root {
    --section-pad-y: 32px;
    --section-pad-x: 18px;
    --col-gap: 24px;

    /* The measured-from-live values put h1/h2 at 16px against 15px body and an
       18px eyebrow — headings smaller than the label above them, which is why
       the page read as an undifferentiated wall of large text on a phone.
       Rebuilt as an actual scale: body sits below the headings, and the
       eyebrow sits below the body. */
    --fs-body: 14px;
    --fs-body-lg: 15px;
    --fs-eyebrow: 11px;
    --fs-eyebrow-lg: 13px;
    --fs-h3: 14px;
    --fs-h2: 19px;
    --fs-h1: 23px;

    --lh-body: 1.6;         /* 1.8 at these sizes wastes a lot of screen */
    --header-h: 60px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur: 1ms; }
}