/* =========================================================
   OCEAN AREA LIVING BRAND IDENTITY — tokens  ·  v1.0 · LOCKED Nov 2026
   Independent system. Shares nothing with Maison.
   Core blues extracted from the existing off-market landing pages
   (oceanarealiving.com global tokens). Yellow sampled from the logo flower.
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600&display=swap');

:root {
  /* Core */
  --oal-ocean: #00A0D2;        /* Signature Ocean Blue — the brand colour */
  --oal-ocean-ink: #007DAA;    /* Ocean, darkened for text/links on white (AA 4.6:1) */
  --oal-turquoise: #0AC3DC;    /* Turquoise — energy accent, on dark grounds */
  --oal-deep: #003F71;         /* Deep Ocean — headlines, footer, primary buttons */
  --oal-deep-2: #00335C;       /* Deep Ocean pressed */
  --oal-white: #FFFFFF;

  /* Secondary */
  --oal-teal: #0092A6;         /* Lagoon Teal — supporting tone, icons, charts */
  --oal-aqua: #B3E3F2;         /* Pale Aqua — tags, highlights, dividers on dark */
  --oal-mist: #ECF7FA;         /* Aqua Mist — the one tinted surface */
  --oal-flower: #F2C21B;       /* Frangipani Yellow — from the logo flower. Tiny doses only */
  --oal-flower-soft: #FDF5D6;  /* Frangipani tint — “New / Just listed” badges */

  /* Neutrals */
  --oal-ink: #1F2A33;          /* Body text — near-black with a blue cast */
  --oal-slate: #5A6670;        /* Secondary text, labels (5.9:1 on white) */
  --oal-line: #DCE7ED;         /* Hairlines, card borders */
  --oal-cloud: #F5F8FA;        /* Neutral alt surface */

  /* Type */
  --oal-display: "Plus Jakarta Sans", "Helvetica Neue", Arial, sans-serif;
  --oal-body: "DM Sans", "Helvetica Neue", Arial, sans-serif;

  /* Radius */
  --oal-r-sm: 6px;   /* buttons, inputs, badges */
  --oal-r-md: 12px;  /* cards, photos */
  --oal-r-lg: 20px;  /* feature panels */

  /* Elevation (soft, cool — used sparingly) */
  --oal-shadow-1: 0 1px 2px rgba(0,63,113,.06), 0 4px 14px rgba(0,63,113,.06);
  --oal-shadow-2: 0 2px 6px rgba(0,63,113,.08), 0 16px 40px rgba(0,63,113,.10);

  /* Spacing — 4pt base */
  --oal-s1: 4px; --oal-s2: 8px; --oal-s3: 12px; --oal-s4: 16px; --oal-s5: 24px;
  --oal-s6: 32px; --oal-s7: 48px; --oal-s8: 64px; --oal-s9: 96px;

  --oal-wrap: 1240px;
}

/* ---------- Type primitives ---------- */
.oal-h1 { font: 700 clamp(40px,5.2vw,64px)/1.05 var(--oal-display); letter-spacing: -0.025em; color: var(--oal-deep); margin: 0; text-wrap: balance; }
.oal-h2 { font: 700 clamp(30px,3.4vw,42px)/1.12 var(--oal-display); letter-spacing: -0.02em; color: var(--oal-deep); margin: 0; text-wrap: balance; }
.oal-h3 { font: 600 24px/1.25 var(--oal-display); letter-spacing: -0.01em; color: var(--oal-deep); margin: 0; }
.oal-h4 { font: 600 18px/1.35 var(--oal-display); color: var(--oal-deep); margin: 0; }
.oal-eyebrow { font: 600 12px/1.2 var(--oal-display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--oal-ocean-ink); margin: 0; }
.oal-lead { font: 400 19px/1.6 var(--oal-body); color: var(--oal-ink); margin: 0; text-wrap: pretty; }
.oal-body { font: 400 16px/1.65 var(--oal-body); color: var(--oal-ink); }
.oal-small { font: 400 14px/1.5 var(--oal-body); color: var(--oal-slate); }
.oal-price { font: 700 36px/1 var(--oal-display); letter-spacing: -0.02em; color: var(--oal-deep); font-variant-numeric: lining-nums tabular-nums; }
.oal-num { font-family: var(--oal-display); font-variant-numeric: lining-nums tabular-nums; }

/* ---------- Buttons ---------- */
.oal-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 24px; border-radius: var(--oal-r-sm);
  font: 600 15px/1 var(--oal-display); letter-spacing: 0; text-decoration: none;
  border: 1.5px solid transparent; cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.oal-btn-primary { background: var(--oal-ocean); color: #fff; }
.oal-btn-primary:hover { background: var(--oal-ocean-ink); }
.oal-btn-deep { background: var(--oal-deep); color: #fff; }
.oal-btn-deep:hover { background: var(--oal-deep-2); }
.oal-btn-outline { border-color: var(--oal-deep); color: var(--oal-deep); background: #fff; }
.oal-btn-outline:hover { background: var(--oal-mist); }
.oal-btn-white { background: #fff; color: var(--oal-deep); }
.oal-btn-white:hover { background: var(--oal-mist); }
.oal-btn-text { padding: 0; min-height: 0; color: var(--oal-ocean-ink); border-radius: 0; border-bottom: 1.5px solid currentColor; padding-bottom: 3px; }
.oal-btn-lg { min-height: 56px; padding: 0 30px; font-size: 16px; }
.oal-btn-sm { min-height: 40px; padding: 0 16px; font-size: 14px; }
.oal-btn:focus-visible { outline: 2px solid var(--oal-ocean); outline-offset: 3px; }

/* ---------- Badges ---------- */
.oal-badge { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: var(--oal-r-sm); font: 600 12px/1 var(--oal-display); letter-spacing: 0.04em; text-transform: uppercase; }
.oal-badge-offmarket { background: var(--oal-deep); color: #fff; }
.oal-badge-new { background: var(--oal-flower-soft); color: #6B5200; }
.oal-badge-new::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--oal-flower); }
.oal-badge-water { background: var(--oal-mist); color: var(--oal-deep); }
.oal-badge-sold { background: var(--oal-cloud); color: var(--oal-slate); border: 1px solid var(--oal-line); }