/* Opt Real Estate — Color tokens
   Primary navy #12274A and mint green #81C88F sampled from the brand logo. */
:root {
  /* ---- Navy (primary brand) ---- */
  --navy-950: #0A1526;
  --navy-900: #0E1E3A;
  --navy-800: #12274A; /* BRAND primary */
  --navy-700: #1C3560;
  --navy-600: #294A7D;
  --navy-500: #3A5F97;
  --navy-400: #5D80B3;
  --navy-300: #92AACD;
  --navy-200: #C3D0E4;
  --navy-100: #E4EAF2;
  --navy-50:  #F2F5F9;

  /* ---- Green (mint accent) ---- */
  --green-800: #2E6B41;
  --green-700: #3E8B54;
  --green-600: #57A96C;
  --green-500: #81C88F; /* BRAND accent */
  --green-400: #9BD6A6;
  --green-300: #BAE4C2;
  --green-200: #D8F0DD;
  --green-100: #ECF8EF;
  --green-50:  #F5FCF7;

  /* ---- Warm neutrals (stone) ---- */
  --stone-950: #16181C;
  --stone-900: #21242A;
  --stone-800: #33373E;
  --stone-700: #4A4F57;
  --stone-600: #626871;
  --stone-500: #7A818B;
  --stone-400: #9BA1AA;
  --stone-300: #C7CBD1;
  --stone-200: #E5E7EB;
  --stone-100: #F1F2F4;
  --stone-50:  #F8F9FA;
  --white: #FFFFFF;

  /* ---- Status / semantic hues ---- */
  --amber-600: #C98A2B;
  --amber-100: #FBF0DA;
  --red-600:   #C0492E;
  --red-100:   #F8E3DD;

  /* ================= SEMANTIC ALIASES ================= */
  --brand:              var(--navy-800);
  --brand-hover:        var(--navy-700);
  --brand-active:       var(--navy-900);
  --brand-accent:       var(--green-500);
  --brand-accent-hover: var(--green-600);
  --brand-accent-ink:   var(--green-800);

  /* Text */
  --text-primary:   var(--navy-800);
  --text-secondary: var(--stone-700);
  --text-muted:     var(--stone-500);
  --text-on-brand:  var(--white);
  --text-on-accent: var(--navy-900);
  --text-link:      var(--navy-700);
  --text-link-hover:var(--green-700);

  /* Surfaces */
  --surface-page:   var(--white);
  --surface-subtle: var(--stone-50);
  --surface-muted:  var(--stone-100);
  --surface-card:   var(--white);
  --surface-brand:  var(--navy-800);
  --surface-brand-deep: var(--navy-950);
  --surface-accent-soft: var(--green-100);

  /* Borders */
  --border-subtle:  var(--stone-200);
  --border-default: var(--stone-300);
  --border-strong:  var(--stone-400);
  --border-brand:   var(--navy-800);
  --border-focus:   var(--green-500);

  /* Property status */
  --status-sale:       var(--green-700);
  --status-sale-bg:    var(--green-100);
  --status-pending:    var(--amber-600);
  --status-pending-bg: var(--amber-100);
  --status-sold:       var(--navy-700);
  --status-sold-bg:    var(--navy-100);

  /* Focus ring */
  --ring: 0 0 0 3px rgba(129, 200, 143, 0.45);
}