/* ============================================================
   BlackOak Real Estate — Design Tokens
   ------------------------------------------------------------
   Layout grammar follows the nazish reference (hairline grids,
   editorial serif/sans pairing, full-bleed media, staggered
   columns).

   Palette is lifted from blackoak-re.com's own compiled stylesheet.
   Two notes on what was found there:

   1. They never use true #000. Their Tailwind `black` is redefined to
      #181a20 — a blue-charcoal — and that token paints every dark band,
      heading and scrim on the live site. Their footer is #0d0d0d and
      their deepest band #0e0e0e.
   2. Their theme does define a gold (#c6a55c), but it renders on exactly
      one page (the step numerals on /list-your-property/). It is
      deliberately not used here.

   So there is no accent hue: emphasis comes from the italic serif and
   from tonal contrast between surfaces, never from colour.
   ============================================================ */

:root {
  /* ===== Layout ===== */
  --content-max-width: 1440px;

  --pad-x: 64px;
  --pad-x-tablet: 40px;
  --pad-x-mobile: 20px;

  /* Generous vertical rhythm — sections need room to read as separate */
  --section-pad-y: 160px;
  --section-pad-y-tablet: 112px;
  --section-pad-y-mobile: 80px;

  /* The nav bar is sized by its flush-right CTA — 30px padding above and
     below a 15px/0.9 label — which lands on 74px exactly. */
  --header-h: 74px;
  --header-h-tablet: 68px;
  --header-h-mobile: 60px;

  /* ===== Colour — surfaces =====
     The page alternates between their deep neutral (#0e0e0e) and their
     brand blue-charcoal (#181a20). That contrast is what separates one
     section from the next. */
  --surface-black: #0d0d0d; /* footer + full-bleed media bands (theirs) */
  --surface-base: #0e0e0e; /* default page — their deepest band */
  --surface-raised: #181a20; /* alternating band — their brand "black" */
  --surface-panel: #202430; /* cards, form, inset panels (one step up) */
  --surface-panel-hi: #272c3a; /* hover / raised card */

  /* Hairline rules — both values are lifted from their stylesheet:
     .1 is the most common border on their site, .3 is their pill border */
  --line: rgba(255, 255, 255, 0.1);
  --line-strong: rgba(255, 255, 255, 0.3);
  --line-w: 0.5px;

  /* ===== Colour — text ===== */
  --text-0: #ffffff;
  --text-50: #f2f2f2;
  --text-100: #dcdcdc;
  --text-300: #a0a0a0; /* their muted-on-dark */
  --text-500: #6b7280; /* their tertiary ink — meta / numerals */
  --text-ink: #181a20; /* their brand charcoal, for text on white */

  /* ===== Typography ===== */
  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;

  /* Display / H1 — restrained so the hero video stays visible */
  --fs-display: 56px;
  --fs-display-tablet: 42px;
  --fs-display-mobile: 30px;
  --lh-display: 1.12;
  --tr-display: -1.4px;
  --tr-display-mobile: -0.6px;

  /* H2 — section titles */
  --fs-h2: 44px;
  --fs-h2-tablet: 32px;
  --fs-h2-mobile: 25px;
  --lh-h2: 1.16;
  --tr-h2: -0.9px;

  /* H3 — card / block titles */
  --fs-h3: 28px;
  --fs-h3-tablet: 24px;
  --fs-h3-mobile: 19px;
  --lh-h3: 1.24;

  /* Body */
  --fs-body: 15px;
  --fs-body-mobile: 14px;
  --lh-body: 1.8;

  --fs-lead: 18px;
  --fs-lead-mobile: 15px;
  --lh-lead: 1.7;

  --fs-small: 13px;
  --lh-small: 1.7;

  /* Small uppercase utility text (form labels, footer column heads,
     button labels). Not used for section eyebrows — there are none. */
  --fs-label: 12px;
  --fs-label-mobile: 10px;
  --lh-label: 1.8;
  --tr-label: 2.4px;

  /* Buttons */
  --fs-btn: 13px;
  --lh-btn: 1;
  --tr-btn: 1.4px;
  --btn-pad-y: 19px;
  --btn-pad-x: 28px;

  /* ===== Motion ===== */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);

  --reveal-distance: 24px;
  --reveal-duration: 0.75s;
  --reveal-stagger: 110ms;

  /* ===== Media overlays =====
     Scrims are built from their brand charcoal rgb(24 26 32), the same
     colour they scrim their own hero video and cards with. */
  --hero-overlay: linear-gradient(
      180deg,
      rgba(24, 26, 32, 0.66) 0%,
      rgba(24, 26, 32, 0.4) 34%,
      rgba(24, 26, 32, 0.76) 80%,
      rgba(24, 26, 32, 0.96) 100%
    ),
    linear-gradient(90deg, rgba(24, 26, 32, 0.74) 0%, rgba(24, 26, 32, 0.18) 62%, rgba(24, 26, 32, 0.46) 100%);

  /* Sits over listing/section photography so overlaid text stays legible.
     The ramp starts early and climbs steeply through the lower third,
     where the overlaid type sits — several listing shots are bright
     (white interiors, sunlit foliage) and a gentle fade cannot hold them. */
  --image-scrim: linear-gradient(
    180deg,
    rgba(13, 13, 13, 0) 0%,
    rgba(13, 13, 13, 0.2) 28%,
    rgba(13, 13, 13, 0.62) 52%,
    rgba(13, 13, 13, 0.88) 76%,
    rgba(13, 13, 13, 0.97) 100%
  );
}

/* ===== Tablet ===== */
@media (max-width: 1023px) {
  :root {
    --pad-x: var(--pad-x-tablet);
    --section-pad-y: var(--section-pad-y-tablet);
    --header-h: var(--header-h-tablet);
    --fs-display: var(--fs-display-tablet);
    --fs-h2: var(--fs-h2-tablet);
    --fs-h3: var(--fs-h3-tablet);
  }
}

/* ===== Mobile ===== */
@media (max-width: 767px) {
  :root {
    --pad-x: var(--pad-x-mobile);
    --section-pad-y: var(--section-pad-y-mobile);
    --header-h: var(--header-h-mobile);
    --fs-display: var(--fs-display-mobile);
    --tr-display: var(--tr-display-mobile);
    --fs-h2: var(--fs-h2-mobile);
    --fs-h3: var(--fs-h3-mobile);
    --fs-label: var(--fs-label-mobile);
    --fs-body: var(--fs-body-mobile);
    --fs-lead: var(--fs-lead-mobile);
    --btn-pad-y: 17px;
    --btn-pad-x: 22px;
  }
}