/* MIRA ATLAS — shared foundation (ROSHN Sedra design language) */
@import url("../fonts.css");

:root{
  --color-primary-light:#4CAF7D; --color-primary:#2D7A5F; --color-primary-dark:#1B4D3E; --color-deep:#0D2818;
  --color-sand:#f5f0e8; --color-sand-dark:#ede5d4; --color-sand-deep:#e8dfc8;
  --color-text-main:#1a1510; --color-text-muted:#5A7D6B;
  --zone-retail:#D4A853; --zone-community:#557a9e; --zone-green:#6BBF47; --zone-upcoming:#8BA88E; --zone-p4:#3D9E72;
  --status-delivered:#2D7A5F; --status-construction:#D4A853; --status-planning:#C9A227;
  --glass-bg:rgba(255,255,255,.40); --glass-bg-hover:rgba(255,255,255,.55);
  --glass-border:rgba(255,255,255,.50); --glass-border-strong:rgba(255,255,255,.70);
  --glass-blur:20px; --glass-blur-panel:24px;
  --shadow-card:0 4px 24px rgba(27,77,62,.05), inset 0 1px 0 rgba(255,255,255,.6);
  --shadow-card-sm:0 2px 16px rgba(27,77,62,.03);
  --shadow-card-hover:0 8px 32px rgba(27,77,62,.10);
  --shadow-panel:0 12px 40px rgba(27,77,62,.12), inset 0 1px 0 rgba(255,255,255,.7);
  --shadow-trigger:0 4px 20px rgba(27,77,62,.10), inset 0 1px 0 rgba(255,255,255,.6);
  --shadow-info:0 12px 48px rgba(13,40,24,.15);
  --accent-line:linear-gradient(to right,var(--color-primary-light),var(--color-primary),var(--color-primary-dark));
  --accent-bar:linear-gradient(to bottom,var(--color-primary-light),var(--color-primary-dark));
  --font-sans:"Outfit",ui-sans-serif,system-ui,sans-serif;
  --font-serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --radius-md:.5rem; --radius-xl:.875rem; --radius-2xl:1.125rem; --radius-3xl:1.375rem;
  --ease-house:cubic-bezier(.4,0,.2,1); --ease-reveal:cubic-bezier(.22,1,.36,1);
  --dur-fast:250ms; --dur-base:300ms; --dur-slow:500ms;
  --bg-body:linear-gradient(to bottom right,var(--color-sand) 0%,var(--color-sand-dark) 50%,var(--color-sand-deep) 100%);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:var(--font-sans);color:var(--color-text-main);background:var(--bg-body);-webkit-font-smoothing:antialiased;overflow:hidden}
a{color:var(--color-primary);text-decoration:none}
a:hover{color:var(--color-primary-dark)}
button{font-family:var(--font-sans);cursor:pointer;border:none;background:none;color:inherit;padding:0}
input{font-family:var(--font-sans)}
input:focus,button:focus-visible{outline:2px solid rgba(76,175,125,.5);outline-offset:1px}

/* ambient depth: orbs + paper noise */
.ambient{position:absolute;inset:0;pointer-events:none;z-index:0}
.ambient::before{content:"";position:absolute;inset:0;background:
  radial-gradient(340px circle at 90% 6%,rgba(76,175,125,.20),transparent 70%),
  radial-gradient(280px circle at 4% 86%,rgba(45,122,95,.15),transparent 70%),
  radial-gradient(220px circle at 76% 44%,rgba(168,213,184,.10),transparent 70%);
  filter:blur(40px)}
.ambient::after{content:"";position:absolute;inset:0;opacity:.015;background-image:url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PScwIDAgMjU2IDI1NicgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nMC44NScgbnVtT2N0YXZlcz0nNCcgc3RpdGNoVGlsZXM9J3N0aXRjaCcvPjwvZmlsdGVyPjxyZWN0IHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnIGZpbHRlcj0ndXJsKCNuKScvPjwvc3ZnPg==")}

/* glass */
.glass{position:relative;border-radius:var(--radius-2xl);border:1px solid var(--glass-border);background:var(--glass-bg);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));box-shadow:var(--shadow-card)}
.glass-hover{transition:background var(--dur-base) var(--ease-house),box-shadow var(--dur-base) var(--ease-house),transform var(--dur-base) var(--ease-house)}
.glass-hover:hover{background:var(--glass-bg-hover);box-shadow:var(--shadow-card-hover);transform:translateY(-2px)}
.glass-panel{border-radius:var(--radius-3xl);border:1px solid var(--glass-border-strong);background:rgba(255,255,255,.52);backdrop-filter:blur(var(--glass-blur-panel)) saturate(150%);-webkit-backdrop-filter:blur(var(--glass-blur-panel)) saturate(150%);box-shadow:var(--shadow-panel)}
.accented::before{content:"";position:absolute;inset:0 0 auto 0;height:2px;background:var(--accent-line);border-radius:99px 99px 0 0}

/* type */
.label{font-size:9px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:rgba(45,122,95,.70)}
.label-dim{color:rgba(45,122,95,.5)}
.display{font-family:var(--font-serif);font-weight:600;color:var(--color-deep);letter-spacing:-.01em;line-height:1}
.body-copy{font-size:13px;line-height:1.8;color:var(--color-text-muted)}
.sec-head{display:flex;align-items:center;gap:10px}
.sec-bar{width:4px;height:18px;border-radius:99px;background:var(--accent-bar);flex:none}
.sec-title{font-family:var(--font-serif);font-size:18px;font-weight:600;color:var(--color-deep);margin:0;letter-spacing:-.01em}

/* status + availability badges */
.badge{display:inline-flex;align-items:center;gap:5px;font-size:8.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;padding:4px 8px;border-radius:99px;border:1px solid}
.badge .dot{width:5px;height:5px;border-radius:99px;background:currentColor}
.badge-prelaunch{color:#8a6d14;background:rgba(201,162,39,.14);border-color:rgba(201,162,39,.3)}
.badge-construction{color:#8a6a1e;background:rgba(212,168,83,.16);border-color:rgba(212,168,83,.35)}
.badge-ready{color:var(--color-primary-dark);background:rgba(45,122,95,.12);border-color:rgba(45,122,95,.25)}
.badge-resale{color:var(--zone-community);background:rgba(85,122,158,.12);border-color:rgba(85,122,158,.28)}
.badge-soldout{color:#7a746a;background:rgba(122,116,106,.10);border-color:rgba(122,116,106,.22)}

/* chips */
.chip{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:99px;border:1px solid rgba(45,122,95,.18);background:rgba(255,255,255,.35);color:var(--color-primary-dark);font-size:11px;font-weight:500;transition:all var(--dur-fast) var(--ease-house);white-space:nowrap}
.chip:hover{background:rgba(255,255,255,.6);border-color:rgba(45,122,95,.35)}
.chip.on{background:var(--color-deep);border-color:var(--color-deep);color:#b0e8c5;box-shadow:0 4px 14px rgba(13,40,24,.25)}

/* buttons */
.btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--color-deep);color:#b0e8c5;border-radius:var(--radius-xl);padding:12px 20px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;box-shadow:0 8px 24px rgba(13,40,24,.28);transition:all var(--dur-base) var(--ease-house)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 12px 30px rgba(13,40,24,.34)}
.btn-ghost{display:inline-flex;align-items:center;justify-content:center;gap:6px;border-radius:var(--radius-xl);padding:10px 16px;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--color-primary-dark);border:1px solid rgba(45,122,95,.22);background:rgba(255,255,255,.3);transition:all var(--dur-fast) var(--ease-house)}
.btn-ghost:hover{background:rgba(255,255,255,.55)}
.icon-btn{width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:var(--color-primary-dark);border:1px solid var(--glass-border);background:var(--glass-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:var(--shadow-card-sm);transition:all var(--dur-fast) var(--ease-house)}
.icon-btn:hover{background:var(--glass-bg-hover)}
.icon-btn.on{background:var(--color-deep);color:#b0e8c5;border-color:var(--color-deep)}

/* toggle switch */
.switch{width:40px;height:23px;border-radius:99px;background:rgba(45,122,95,.18);border:1px solid rgba(45,122,95,.15);position:relative;transition:background var(--dur-base) var(--ease-house);flex:none}
.switch::after{content:"";position:absolute;top:2px;left:2px;width:17px;height:17px;border-radius:99px;background:#fff;box-shadow:0 1px 4px rgba(13,40,24,.25);transition:transform var(--dur-base) var(--ease-house)}
.switch.on{background:var(--color-primary)}
.switch.on::after{transform:translateX(17px)}

/* scrollbars */
.scroll{scrollbar-width:thin;scrollbar-color:rgba(45,122,95,.25) transparent}
.scroll::-webkit-scrollbar{width:6px;height:6px}
.scroll::-webkit-scrollbar-thumb{background:rgba(45,122,95,.22);border-radius:99px}
.scroll::-webkit-scrollbar-track{background:transparent}

/* shimmer sweep on hover (cards) */
.shimmer{position:relative;overflow:hidden}
.shimmer::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-18deg);transition:left 1s var(--ease-house);pointer-events:none}
.shimmer:hover::after{left:130%}

@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes popIn{from{opacity:0;transform:scale(.92) translateY(8px)}to{opacity:1;transform:none}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(76,175,125,.45)}100%{box-shadow:0 0 0 14px rgba(76,175,125,0)}}