:root {
  /* ── Brand colors (Figma casal palette) ──────────────────── */
  --color-primary:        #325a69;   /* casal/main */
  --color-primary-light:  #418799;   /* casal/500  */
  --color-primary-dark:   #192b33;   /* darkest teal / footer bg */

  /* ── Accent colors (Figma bone palette) ─────────────────── */
  --color-accent:         #dfc9b9;   /* bone/200 – CTA buttons */
  --color-accent-dark:    #301c1a;   /* bone/950 – text on accent */
  --color-accent-light:   #d3b39e;   /* bone/300 – "+" suffix in stats */

  /* ── Neutral ─────────────────────────────────────────────── */
  --color-black:          #1e1e1e;
  --color-white:          #ffffff;
  --color-gray:           #8e8e93;   /* placeholder / muted text */
  --color-gray-2:         #aeaeb2;   /* borders */
  --color-bg-subtle:      #fafafa;   /* skill tag / light surface */

  /* ── Extended palette ───────────────────────────────────── */
  --color-bone-500:       #B3765C;   /* ribbon badge fill */
  --color-bone-950-dark:  #5B3833;   /* ribbon fold shadow */
  --color-casal-200:      #BEDDE3;   /* card divider / border tint */

  /* ── Functional ──────────────────────────────────────────── */
  --color-for-sale:       #49815c;   /* green badge */
  --color-for-rent:       #418799;   /* teal badge */
  --color-whatsapp:       #25d366;
  --color-error:          #dc3545;

  /* ── Typography ──────────────────────────────────────────── */
  --font-sans:            'Inter', sans-serif;
  --font-display:         'Poppins', sans-serif;

  /* ── Hero overlay ─────────────────────────────────────────── */
  --hero-overlay:         rgba(50, 90, 105, 0.4);

  /* ── Layout ──────────────────────────────────────────────── */
  --container-px:         104px;
  --container-px-mobile:  20px;
  --section-py:           64px;
  --section-py-mobile:    40px;

  /* ── Radii ───────────────────────────────────────────────── */
  --radius-sm:     8px;
  --radius-md:     16px;
  --radius-lg:     24px;
  --radius-pill:   100px;

  /* ── Shadows ─────────────────────────────────────────────── */
  --shadow-card:   0 4px 24px rgba(0,0,0,0.08);
  --shadow-search: 0 30px 60px -15px rgba(143,144,188,0.15);
  --shadow-btn:    0 4px 12px rgba(50,90,105,0.2);

  /* ── Transitions ─────────────────────────────────────────── */
  --transition: 0.2s ease;
}

/* ── Global accessibility utility ───────────────────────────── */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}