/* =====================================================================
   DUBAI SKY — the site's colour theme (light + dark mode)
   style.css holds the layout; this file holds the colours.
   ===================================================================== */

/* ---------- Light mode (default) ---------- */
:root{
  color-scheme:light;
  --teal-900:#0a2740; --teal-800:#0c4a78; --teal-700:#0a78c2; --teal-600:#1291dc; --teal-500:#38b2f2;
  --teal-rgb:10,120,194; --teal-bright-rgb:56,178,242;
  --amber-500:#fbbf24; --amber-400:#fdd65c; --amber-rgb:251,191,36; --amber2-rgb:253,214,92;
  --coral:#f0612e; --coral-rgb:240,97,46;
  --ink:#10263b; --slate:#475b6e; --mist:#7d8c9b;
  --sand:#fff6dc; --paper:#fffef8; --surface:#ffffff;
  --line:#eadfc4; --line-rgb:234,223,196; --paper-rgb:255,254,248;
  --shadow-rgb:12,74,120; --ink-rgb:13,52,80;
  --grad:linear-gradient(135deg,#0a78c2 0%,#1291dc 50%,#38b2f2 100%);
  --grad-warm:linear-gradient(135deg,#fbbf24 0%,#f0612e 100%);
  --grad-3:linear-gradient(135deg,#fbbf24,#f0612e);
  --dark:#0d3450; --footer-bg:#0a2740;
  --on-dark:#fff8ec; --on-dark-2:#f6e7c8; --on-dark-3:#c3d8ea; --on-dark-4:#8ea8c0; --on-cta:#e8f6ff;
  --body-2:#2c3c4d; --price-ink:#3b1d00;
  --hero-bg:radial-gradient(35% 45% at 88% 12%,rgba(253,214,92,.75),transparent 62%),linear-gradient(180deg,#bfe6ff 0%,#dff2ff 60%,#fff6dc 100%);
  --phero-bg:radial-gradient(40% 80% at 85% 0,rgba(253,214,92,.55),transparent 62%),linear-gradient(180deg,#c9ebff,#e9f6ff);
  --trust-bg:#0a78c2;
  --band-bg:#0c4a78;
  --heading:#0c3a5e;
  --eyebrow-ink:#0c4a78; --eyebrow-bg:rgba(255,255,255,.75);
  --danger:#b42318; --danger-bg:rgba(240,97,46,.12);
}
.eyebrow{color:var(--eyebrow-ink);background:var(--eyebrow-bg)}
.hero h1,.phero h1{color:var(--heading)}
.band{background:var(--band-bg)}
.formnote.err{background:var(--danger-bg);color:var(--danger)}
.btn-danger,.btn-danger:hover,.mini.danger{color:var(--danger)}

/* ---------- Dark mode: a Dubai night sky ---------- */
:root[data-theme="dark"]{
  color-scheme:dark;
  --teal-900:#e6f4ff; --teal-800:#8fd3ff; --teal-700:#1f8fd6; --teal-600:#45aeea; --teal-500:#7cc9f5;
  --teal-rgb:56,178,242; --teal-bright-rgb:56,178,242;
  --ink:#eef5fb; --slate:#b4c4d4; --mist:#8499ad;
  --sand:#0f2032; --paper:#0a1624; --surface:#122a40;
  --line:#23405c; --line-rgb:35,64,92; --paper-rgb:10,22,36;
  --shadow-rgb:0,0,0; --ink-rgb:4,10,18;
  --dark:#07111c; --footer-bg:#050d16;
  --on-cta:#e8f6ff;
  --body-2:#d3dee9;
  --hero-bg:radial-gradient(30% 40% at 88% 12%,rgba(253,214,92,.22),transparent 62%),radial-gradient(60% 60% at 10% 100%,rgba(56,178,242,.14),transparent 60%),linear-gradient(180deg,#0d2b47 0%,#0b1d31 60%,#0a1624 100%);
  --phero-bg:radial-gradient(40% 80% at 85% 0,rgba(253,214,92,.16),transparent 62%),linear-gradient(180deg,#0d2b47,#0b1b2d);
  --trust-bg:#0b5d99;
  --band-bg:#0b2740;
  --heading:#f3f8fc;
  --eyebrow-ink:#9fdcff; --eyebrow-bg:rgba(56,178,242,.16);
  --danger:#ffb4a6; --danger-bg:rgba(255,107,87,.14);
}
:root[data-theme="dark"] .lcard .lbtn{color:#cfeaff}
:root[data-theme="dark"] .lcard .lbtn:hover{background:var(--teal-700);color:#fff}
:root[data-theme="dark"] .field input::placeholder,
:root[data-theme="dark"] .field textarea::placeholder{color:#6f869b}
:root[data-theme="dark"] .mapwrap iframe{filter:invert(.9) hue-rotate(180deg) brightness(.95)}
:root[data-theme="dark"] .bubble.mine{background:#1f8fd6;border-color:#1f8fd6}
:root[data-theme="dark"] .dtable tr.unread td{background:rgba(251,191,36,.08)}

/* Logo: dark-text version in light mode, light-text version in dark mode */
.logo-img.for-dark{display:none}
:root[data-theme="dark"] .logo-img.for-light{display:none}
:root[data-theme="dark"] .logo-img.for-dark{display:block}

/* Light / dark switch in the header */
.theme-toggle{
  width:42px;height:42px;border-radius:50%;border:1.5px solid var(--line);background:var(--surface);
  color:var(--teal-800);display:grid;place-items:center;cursor:pointer;transition:.2s;flex:none;
}
.theme-toggle:hover{border-color:var(--teal-600);transform:rotate(-12deg)}
.theme-toggle svg{width:20px;height:20px}
.theme-toggle .i-sun{display:none}
:root[data-theme="dark"] .theme-toggle .i-sun{display:block}
:root[data-theme="dark"] .theme-toggle .i-moon{display:none}
:root[data-theme="dark"] .theme-toggle{color:var(--amber-400)}

/* Smooth colour change when switching */
.theme-anim, .theme-anim *{transition:background-color .35s ease,color .35s ease,border-color .35s ease!important}