/* ═══════════════════════════════════════════
   Propertee — Theme System
   5 themes via CSS custom properties
   ═══════════════════════════════════════════ */

/* ── Reset ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,'Noto Sans Khmer',sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  margin:0;
}

/* ═══ Theme Variables ═══ */
:root,
[data-theme="sakura"] {
  --primary: #EC4899;
  --primary-light: #F9A8D4;
  --primary-dark: #BE185D;
  --primary-bg: #FFF5F9;
  --accent: #F472B6;
  --accent-soft: #FDF2F8;
  --surface: #FFFFFF;
  --surface-alt: #FFF5F9;
  --surface-hover: #FDF2F8;
  --border: #F9A8D4;
  --border-light: #FCE7F3;
  --text: #1F1A1C;
  --text-secondary: #6B5B63;
  --text-muted: #A18E98;
  --gradient-from: #EC4899;
  --gradient-to: #F472B6;
  --shadow: rgba(236,72,153,0.12);
  --shadow-strong: rgba(236,72,153,0.25);
  --card-radius: 16px;
  --badge-sale: #EC4899;
  --badge-rent: #8B5CF6;
  --badge-pending: #F59E0B;
  --badge-sold: #10B981;
}

[data-theme="azure"] {
  --primary: #3B82F6;
  --primary-light: #93C5FD;
  --primary-dark: #1D4ED8;
  --primary-bg: #F0F7FF;
  --accent: #60A5FA;
  --accent-soft: #EFF6FF;
  --surface: #FFFFFF;
  --surface-alt: #F0F7FF;
  --surface-hover: #EFF6FF;
  --border: #93C5FD;
  --border-light: #DBEAFE;
  --text: #0F172A;
  --text-secondary: #475569;
  --text-muted: #94A3B8;
  --gradient-from: #3B82F6;
  --gradient-to: #60A5FA;
  --shadow: rgba(59,130,246,0.12);
  --shadow-strong: rgba(59,130,246,0.25);
  --card-radius: 16px;
  --badge-sale: #3B82F6;
  --badge-rent: #8B5CF6;
  --badge-pending: #F59E0B;
  --badge-sold: #10B981;
}

[data-theme="lime"] {
  --primary: #65A30D;
  --primary-light: #A3E635;
  --primary-dark: #3F6212;
  --primary-bg: #F7FEE7;
  --accent: #84CC16;
  --accent-soft: #ECFCCB;
  --surface: #FFFFFF;
  --surface-alt: #F7FEE7;
  --surface-hover: #ECFCCB;
  --border: #A3E635;
  --border-light: #D9F99D;
  --text: #1A2E05;
  --text-secondary: #3F6212;
  --text-muted: #84A95E;
  --gradient-from: #65A30D;
  --gradient-to: #84CC16;
  --shadow: rgba(101,163,13,0.12);
  --shadow-strong: rgba(101,163,13,0.25);
  --card-radius: 16px;
  --badge-sale: #65A30D;
  --badge-rent: #8B5CF6;
  --badge-pending: #F59E0B;
  --badge-sold: #10B981;
}

[data-theme="lavender"] {
  --primary: #7C3AED;
  --primary-light: #A78BFA;
  --primary-dark: #5B21B6;
  --primary-bg: #F5F3FF;
  --accent: #8B5CF6;
  --accent-soft: #EDE9FE;
  --surface: #FFFFFF;
  --surface-alt: #F5F3FF;
  --surface-hover: #EDE9FE;
  --border: #A78BFA;
  --border-light: #DDD6FE;
  --text: #1E1B4B;
  --text-secondary: #4C1D95;
  --text-muted: #8B7FAD;
  --gradient-from: #7C3AED;
  --gradient-to: #A78BFA;
  --shadow: rgba(124,58,237,0.12);
  --shadow-strong: rgba(124,58,237,0.25);
  --card-radius: 16px;
  --badge-sale: #7C3AED;
  --badge-rent: #EC4899;
  --badge-pending: #F59E0B;
  --badge-sold: #10B981;
}

[data-theme="saffron"] {
  --primary: #D97706;
  --primary-light: #FBBF24;
  --primary-dark: #92400E;
  --primary-bg: #FFFBEB;
  --accent: #F59E0B;
  --accent-soft: #FEF3C7;
  --surface: #FFFFFF;
  --surface-alt: #FFFBEB;
  --surface-hover: #FEF3C7;
  --border: #FBBF24;
  --border-light: #FDE68A;
  --text: #1C1917;
  --text-secondary: #78350F;
  --text-muted: #A68B5B;
  --gradient-from: #D97706;
  --gradient-to: #F59E0B;
  --shadow: rgba(217,119,6,0.12);
  --shadow-strong: rgba(217,119,6,0.25);
  --card-radius: 16px;
  --badge-sale: #D97706;
  --badge-rent: #8B5CF6;
  --badge-pending: #F59E0B;
  --badge-sold: #10B981;
}

/* ═══ Base Styles ═══ */
body{
  background: var(--primary-bg);
  color: var(--text);
}
a{color:var(--primary);text-decoration:none;transition:.2s}
a:hover{color:var(--primary-dark)}
img{max-width:100%;height:auto;display:block}

.container{
  max-width:1200px;
  margin:0 auto;
  padding:0 24px;
}
@media(max-width:768px){
  .container{padding:0 16px}
}

/* ── Buttons ── */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 24px;border-radius:12px;
  font-size:.9rem;font-weight:600;
  border:none;cursor:pointer;
  transition:all .25s cubic-bezier(.4,0,.2,1);
}
.btn-primary{
  background:linear-gradient(135deg,var(--gradient-from),var(--gradient-to));
  color:#fff;box-shadow:0 4px 14px var(--shadow-strong);
}
.btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 25px var(--shadow-strong);
}
.btn-outline{
  background:transparent;
  border:2px solid var(--border);
  color:var(--text);
}
.btn-outline:hover{
  border-color:var(--primary);
  color:var(--primary);
  background:var(--accent-soft);
}
.btn-ghost{
  background:transparent;border:none;
  color:var(--text-secondary);padding:8px 16px;
}
.btn-ghost:hover{background:var(--surface-hover);color:var(--primary)}

/* ── Header ── */
.site-header{
  background:var(--surface);
  border-bottom:1px solid var(--border-light);
  position:sticky;top:0;z-index:50;
  backdrop-filter:blur(12px);
  background:rgba(255,255,255,.85);
}
.site-header .container{
  display:flex;align-items:center;justify-content:space-between;
  height:64px;
}
.logo{
  display:flex;align-items:center;gap:10px;
  font-size:1.25rem;font-weight:700;color:var(--text);
}
.logo-icon{
  width:36px;height:36px;
  background:linear-gradient(135deg,var(--gradient-from),var(--gradient-to));
  border-radius:10px;display:flex;align-items:center;justify-content:center;
  font-size:1.1rem;
}
.header-actions{display:flex;align-items:center;gap:12px}

/* ── Language Switcher ── */
.lang-switcher{
  display:flex;gap:4px;
  background:var(--surface-alt);
  border-radius:10px;padding:3px;
}
.lang-btn{
  padding:6px 12px;border:none;border-radius:8px;
  font-size:.8rem;font-weight:500;cursor:pointer;
  transition:.2s;background:transparent;color:var(--text-secondary);
}
.lang-btn.active{
  background:var(--surface);color:var(--primary);
  box-shadow:0 1px 3px rgba(0,0,0,.08);
}
.lang-btn:hover:not(.active){color:var(--text)}

/* ── Theme Switcher ── */
.theme-switcher{
  display:flex;gap:6px;align-items:center;
  padding:6px 10px;
  background:var(--surface-alt);
  border-radius:12px;
}
.theme-dot{
  width:22px;height:22px;border-radius:50%;
  border:2px solid transparent;cursor:pointer;
  transition:all .2s;display:block;
  flex-shrink:0;
}
.theme-dot:hover{transform:scale(1.2)}
.theme-dot.active{border-color:var(--text);box-shadow:0 0 0 2px var(--surface)}

/* ═══ Landing Page ═══ */
.landing{min-height:calc(100vh - 64px);display:flex;flex-direction:column}

.hero{
  flex:1;display:flex;align-items:center;justify-content:center;
  padding:80px 24px 60px;
  text-align:center;
  position:relative;overflow:hidden;
}
.hero-bg{
  position:absolute;inset:0;
  background:linear-gradient(135deg,var(--primary-bg) 0%,var(--surface) 50%,var(--accent-soft) 100%);
  z-index:0;
}
.hero-bg::before{
  content:'';position:absolute;
  top:-50%;right:-20%;
  width:600px;height:600px;border-radius:50%;
  background:radial-gradient(circle,var(--primary-light) 0%,transparent 70%);
  opacity:.15;
}
.hero-inner{position:relative;z-index:1;max-width:900px}

.hero h1{
  font-size:3.5rem;font-weight:800;line-height:1.15;
  margin-bottom:8px;
  background:linear-gradient(135deg,var(--text),var(--primary));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
}
.hero p{
  font-size:1.15rem;color:var(--text-secondary);
  margin-bottom:48px;max-width:600px;margin-inline:auto;
}

/* ── Preview Cards ── */
.card-grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:24px;max-width:800px;margin:0 auto;
}
@media(max-width:640px){
  .card-grid{grid-template-columns:1fr}
  .hero h1{font-size:2.2rem}
}

.preview-card{
  background:var(--surface);
  border:2px solid var(--border-light);
  border-radius:20px;
  padding:36px 28px;
  text-align:left;
  transition:all .3s cubic-bezier(.4,0,.2,1);
  cursor:pointer;
  display:flex;flex-direction:column;
  position:relative;overflow:hidden;
}
.preview-card::before{
  content:'';position:absolute;top:0;left:0;right:0;
  height:4px;
  background:linear-gradient(90deg,var(--gradient-from),var(--gradient-to));
  opacity:0;transition:.3s;
}
.preview-card:hover{
  border-color:var(--primary);
  transform:translateY(-6px);
  box-shadow:0 20px 50px var(--shadow);
}
.preview-card:hover::before{opacity:1}

.preview-card .icon-wrap{
  width:52px;height:52px;border-radius:14px;
  background:linear-gradient(135deg,var(--gradient-from),var(--gradient-to));
  display:flex;align-items:center;justify-content:center;
  font-size:1.5rem;margin-bottom:16px;
}
.preview-card h3{
  font-size:1.3rem;font-weight:700;margin-bottom:8px;
}
.preview-card p{
  font-size:.9rem;color:var(--text-secondary);line-height:1.6;margin-bottom:20px;
  flex:1;
}
.preview-card .card-footer{
  display:flex;align-items:center;gap:6px;
  font-size:.85rem;font-weight:600;color:var(--primary);
}

/* ── Footer ── */
.site-footer{
  padding:20px 0;
  text-align:center;
  font-size:.85rem;color:var(--text-muted);
  border-top:1px solid var(--border-light);
}

/* ── Theme Picker (floating) ── */
.theme-picker{
  position:fixed;bottom:24px;right:24px;z-index:100;
  display:flex;gap:8px;
  background:var(--surface);
  border:1px solid var(--border-light);
  border-radius:16px;
  padding:10px 14px;
  box-shadow:0 10px 30px rgba(0,0,0,.08);
  backdrop-filter:blur(12px);
}
.theme-picker .theme-dot{width:28px;height:28px}
.theme-label{
  font-size:.7rem;color:var(--text-muted);
  margin-right:4px;align-self:center;
}

/* ── Utility ── */
.text-gradient{
  background:linear-gradient(135deg,var(--gradient-from),var(--gradient-to));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
}