/**
 * Design tokens — Wadi Badan
 *
 * Extracted directly from the Figma file "WADI BADAN FINAL NOTO SANS"
 * (file key K0wFuXYTsVwKS9duKu9Htb) by reading the rendered page nodes,
 * not the spec frames. Where the file's two written specs disagreed with
 * the actual designs, the designs won. Deviations are noted inline.
 */

:root {
  /* ---------------------------------------------------------------
   * Brand colour
   * Names follow the official colour-system frame in the Figma file.
   * ------------------------------------------------------------ */
  --wb-primary:          #2B76A0; /* header, logo, buttons on light bg */
  --wb-primary-bright:   #5FA8D3; /* buttons on dark/image backgrounds */
  --wb-primary-dark:     #1D5678; /* footer bg + primary heading colour */
  --wb-secondary:        #2A9E36; /* button hover, accents */
  --wb-secondary-light:  #6DC177;

  /* Present throughout the designs and in the logo, but absent from the
   * written colour spec. Sampled from the logo artwork. */
  --wb-teal:             #1A6956;
  --wb-navy:             #10354B; /* hero headline */
  --wb-ink:              #091638; /* style-guide heading colour */

  /* ---------------------------------------------------------------
   * Neutrals
   * ------------------------------------------------------------ */
  --wb-white:            #FFFFFF;
  --wb-surface:          #F5F8FA; /* tinted section background */
  --wb-text:             #1A1A1A;
  --wb-text-muted:       #555555;
  --wb-gray-600:         #666666;
  --wb-gray-500:         #777777;
  --wb-gray-400:         #A1A1A1;
  --wb-gray-300:         #D9D9D9;
  --wb-placeholder:      #757575;
  --wb-overlay:          rgba(0, 0, 0, 0.5); /* hero image scrim */

  /* Introduced by the Apartments page. */
  --wb-input-border:     #888F9F; /* form field borders and placeholder text */
  --wb-hairline:         #E1E1EC; /* rule under the search bar */
  --wb-card-bg:          #F8F8F8;

  /* ---------------------------------------------------------------
   * Typography
   * The design uses Noto Sans and Noto Sans Arabic. This build is
   * English-only, so Noto Sans leads and Noto Sans Arabic is kept as a
   * fallback so any Arabic content still renders in-family.
   * ------------------------------------------------------------ */
  --wb-font: "Noto Sans", "Noto Sans Arabic", -apple-system, BlinkMacSystemFont,
             "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --wb-fw-regular:  400;
  --wb-fw-medium:   500;
  --wb-fw-semibold: 600;
  --wb-fw-bold:     700;

  /*
   * Every size is fluid between the two frames the designer actually drew:
   * 393px (D/M) and 1440px (D/Home). Each clamp's middle term is the straight
   * line through both, so at exactly 393px and 1440px the rendered size equals
   * the Figma value, and everything between interpolates.
   *
   * Lower bounds come from the mobile frame rather than the style guide's PH
   * tokens, which disagree with it (the guide says h1 is 36px; the mobile
   * frame draws it at 33px). The drawn frames win, as elsewhere.
   */
  --wb-fs-h1: clamp(2.0625rem, 1.3153rem + 3.042vw, 4.0531rem);      /* 33 → 64.85  hero headline */
  --wb-fs-section: clamp(1.625rem, 1.0179rem + 2.472vw, 3.2425rem);  /* 26 → 51.88  section headings */
  --wb-fs-about: clamp(1.375rem, 0.827rem + 2.231vw, 2.835rem);      /* 22 → 45.36  About heading */
  --wb-fs-about-p: clamp(0.875rem, 0.647rem + 0.928vw, 1.4825rem);   /* 14 → 23.72  About paragraph */
  --wb-fs-residence: clamp(1.4375rem, 1.0035rem + 1.767vw, 2.5938rem); /* 23 → 41.5  featured listing */
  --wb-fs-advant: clamp(1.5625rem, 1.3514rem + 0.860vw, 2.125rem);   /* 25 → 34     The Advantages */
  --wb-fs-newscard: clamp(1rem, 0.5965rem + 1.643vw, 2.075rem);      /* 16 → 33.2   news card title */
  --wb-fs-stat: clamp(1.5rem, 1.0475rem + 1.842vw, 2.7056rem);       /* 24 → 43.29  statistic figure */
  --wb-fs-stat-label: clamp(0.75rem, 0.5914rem + 0.646vw, 1.1725rem);/* 12 → 18.76  statistic label */
  --wb-fs-newsletter: clamp(1.3125rem, 1.1821rem + 0.531vw, 1.66rem);/* 21 → 26.56  newsletter heading */
  --wb-fs-herocard: clamp(0.875rem, 0.7002rem + 0.712vw, 1.3406rem); /* 14 → 21.45  hero card title */
  --wb-fs-herocard-p: clamp(0.7813rem, 0.6459rem + 0.551vw, 1.1419rem); /* 12.5 → 18.27 hero card text */
  --wb-fs-eyebrow: clamp(0.75rem, 0.6247rem + 0.510vw, 1.0837rem);   /* 12 → 17.34  section label */
  --wb-fs-eyebrow-sm: clamp(0.75rem, 0.7265rem + 0.096vw, 0.8125rem);/* 12 → 13     small section label */
  --wb-fs-lead: clamp(0.8438rem, 0.6619rem + 0.740vw, 1.3281rem);    /* 13.5 → 21.25 hero subheading */
  --wb-fs-body: clamp(0.8438rem, 0.7616rem + 0.334vw, 1.0625rem);    /* 13.5 → 17   body copy */
  --wb-fs-quote: clamp(0.8125rem, 0.7187rem + 0.382vw, 1.0625rem);   /* 13 → 17     quotes, specs, prices */
  --wb-fs-link: clamp(0.7813rem, 0.6757rem + 0.430vw, 1.0625rem);    /* 12.5 → 17   footer and card links */
  --wb-fs-meta: clamp(0.6875rem, 0.5467rem + 0.573vw, 1.0625rem);    /* 11 → 17     news card date */
  --wb-fs-btn: clamp(0.875rem, 0.8046rem + 0.287vw, 1.0625rem);      /* 14 → 17     button labels */
  --wb-fs-offer-t: clamp(0.875rem, 0.8281rem + 0.191vw, 1rem);       /* 14 → 16     offering card title */
  --wb-fs-offer-p: clamp(0.7813rem, 0.7695rem + 0.048vw, 0.8125rem); /* 12.5 → 13   offering card text */
  --wb-fs-offer-lead: clamp(0.8438rem, 0.8086rem + 0.143vw, 0.9375rem); /* 13.5 → 15 offerings lead */

  /* Fixed sizes that do not change between the two frames. */
  --wb-fs-small:   1rem;      /* 16px */
  --wb-fs-caption: 0.8125rem; /* 13px */
  --wb-fs-micro:   0.75rem;   /* 12px — card specs, copyright */

  /* Kept as aliases so heading elements still have sensible defaults. */
  --wb-fs-h2: var(--wb-fs-section);
  --wb-fs-h3: var(--wb-fs-residence);
  --wb-fs-h4: var(--wb-fs-newscard);
  --wb-fs-h5: var(--wb-fs-newsletter);
  --wb-fs-h6: var(--wb-fs-lead);

  /* Figma reports 1.2 for headings, though the file's own labels claim
   * 1.33. The rendered value is authoritative. */
  --wb-lh-heading: 1.2;
  --wb-lh-body:    1.5;

  /* ---------------------------------------------------------------
   * Spacing — 8px base, matching the gaps used across the designs
   * ------------------------------------------------------------ */
  --wb-space-1:  0.25rem;  /*  4px */
  --wb-space-2:  0.5rem;   /*  8px */
  --wb-space-3:  0.75rem;  /* 12px */
  --wb-space-4:  1rem;     /* 16px */
  --wb-space-5:  1.5rem;   /* 24px */
  --wb-space-6:  2rem;     /* 32px */
  --wb-space-7:  2.5rem;   /* 40px */
  --wb-space-8:  3rem;     /* 48px */
  --wb-space-9:  3.5rem;   /* 56px */
  --wb-space-10: 4rem;     /* 64px */
  --wb-space-11: 5rem;     /* 80px */
  --wb-space-12: 6rem;     /* 96px */

  /* ---------------------------------------------------------------
   * Layout
   * The desktop frames draw 1200px of content inside 120px gutters. The site
   * runs considerably wider than the comp by request, so the layout keeps the
   * design's proportions while filling a large monitor.
   * Change --wb-container alone to widen or narrow the whole site.
   * ------------------------------------------------------------ */
  --wb-container:   100rem;   /* 1600px — most sections */
  --wb-container-wide: 107.5rem; /* 1720px — Offerings, Residence, Contact cards */
  --wb-border:      #E2E8ED;  /* hairline used on the stats panel and cards */
  --wb-gutter:      1.375rem; /* 22px — the mobile frame's 5.64% margin */
  --wb-gutter-lg:   3.75rem;  /* 60px at desktop */
  --wb-header-h:    5rem;     /* 80px on mobile */

  /* Vertical rhythm between page sections: 32px on mobile, 96px at desktop. */
  --wb-section-y:   clamp(2rem, 0.5rem + 6vw, 6rem);

  /*
   * The mobile frame gives each section image a fixed height rather than an
   * aspect ratio; at desktop they revert to the designed proportions.
   */
  --wb-img-about:     12.5rem; /* 200px */
  --wb-img-purpose:   13.75rem; /* 220px */
  --wb-img-testimonial: 11.25rem; /* 180px */
  --wb-img-residence: 13.75rem; /* 220px */
  --wb-img-newscard:  8.125rem; /* 130px */

  /* ---------------------------------------------------------------
   * Radius, borders, shadow, motion
   * ------------------------------------------------------------ */
  --wb-radius-sm:   0.25rem;  /*  4px — buttons, inputs */
  --wb-radius-md:   0.5rem;   /*  8px */
  --wb-radius-lg:   1rem;     /* 16px — cards */
  --wb-radius-xl:   1.5rem;   /* 24px — feature panels */
  --wb-radius-pill: 999px;

  --wb-shadow-sm: 0 1px 2px rgba(9, 22, 56, 0.06),
                  0 1px 3px rgba(9, 22, 56, 0.10);
  --wb-shadow-md: 0 4px 12px rgba(9, 22, 56, 0.08),
                  0 2px 4px rgba(9, 22, 56, 0.06);
  --wb-shadow-lg: 0 12px 32px rgba(9, 22, 56, 0.12),
                  0 4px 8px rgba(9, 22, 56, 0.06);

  /* The design's single named shadow, used on testimonial and news cards. */
  --wb-shadow-card: 0 0 47.66px rgba(0, 0, 0, 0.08);
  /* And the deeper one under the hero cards. */
  --wb-shadow-hero: 0 16px 48px rgba(0, 0, 0, 0.08);
  /* Listing cards on the Apartments archive use their own, tighter shadow. */
  --wb-shadow-listing: 0 4px 20px rgba(0, 0, 0, 0.1);
  --wb-shadow-input: inset 0 1px 5px rgba(0, 0, 0, 0.1);

  --wb-transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);

  --wb-z-header: 100;
  --wb-z-menu:   200;
}

/* The header grows from 80px to its designed 120px at desktop. */
@media (min-width: 64rem) {
  :root {
    --wb-header-h: 7.5rem;
  }
}