/* ═══════════════════════════════════════════════════════════════════════════
   DOMIREL DESIGN TOKEN SYSTEM  —  v1.0
   Single source of truth for all brand values across the platform.

   Usage:  Link this file FIRST, before app.css and any component CSS.
           Replace all --pp-* variables with their --dm-* counterparts below.
           Replace all hardcoded #2563eb / #b71807 / #E16036 with tokens.

   Fonts:  DM Sans (already loaded in agent-articles.css) — promote globally
           Playfair Display (already loaded)               — display / headings
   ═══════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;0,800;1,400&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600;9..40,700&display=swap');

/* ── LIGHT MODE ─────────────────────────────────────────────────────────── */
:root {

  /* ── Brand palette ────────────────────────────────────────────── */
  --dm-navy-deep:     #0d1120;   /* hero backgrounds, darkest surfaces  */
  --dm-navy:          #1a1a2e;   /* primary dark surface                */
  --dm-navy-mid:      #16213e;   /* card dark bg, layered surfaces      */
  --dm-navy-light:    #0f3460;   /* accent dark bg, borders on dark     */

  --dm-gold:          #c9a96e;   /* primary accent — gold               */
  --dm-gold-deep:     #b8952d;   /* hover state, stronger accent        */
  --dm-gold-pale:     #fdf6e9;   /* very light gold tint — bg washes    */
  --dm-gold-border:   rgba(201, 169, 110, 0.25); /* subtle gold borders */
  --dm-gold-glow:     rgba(201, 169, 110, 0.08); /* ghost fills         */

  /* ── Semantic UI colours ──────────────────────────────────────── */
  --dm-primary:       var(--dm-gold);
  --dm-primary-hover: var(--dm-gold-deep);
  --dm-surface-dark:  var(--dm-navy);
  --dm-surface-card:  var(--dm-navy-mid);

  /* ── Neutral text & backgrounds (light mode) ──────────────────── */
  --dm-text-primary:  #1e293b;   /* body copy on white             */
  --dm-text-body:     #374151;   /* paragraph text                 */
  --dm-text-muted:    #6b7280;   /* meta, labels, secondary copy   */
  --dm-text-hint:     #9ca3af;   /* placeholder, disabled          */
  --dm-text-inverse:  #ffffff;   /* text on dark surfaces          */
  --dm-text-gold:     var(--dm-gold);

  --dm-bg-page:       #f8fafc;   /* page background                */
  --dm-bg-surface:    #ffffff;   /* cards, panels                  */
  --dm-bg-subtle:     #f1f5f9;   /* alternate row, section wash    */
  --dm-bg-gold-wash:  var(--dm-gold-pale);

  --dm-border:        #e2e8f0;   /* default border                 */
  --dm-border-strong: #cbd5e1;   /* emphasis border                */
  --dm-border-gold:   var(--dm-gold-border);

  /* ── Status colours ───────────────────────────────────────────── */
  --dm-success:       #10b981;
  --dm-success-bg:    #f0fdf4;
  --dm-warning:       #f59e0b;
  --dm-warning-bg:    #fffbeb;
  --dm-danger:        #ef4444;
  --dm-danger-bg:     #fef2f2;
  --dm-info:          #3b82f6;
  --dm-info-bg:       #eff6ff;

  /* ── Property-specific badge colours ─────────────────────────── */
  --dm-badge-new:     #10b981;   /* New listing                    */
  --dm-badge-hot:     #ef4444;   /* Hot / trending                 */
  --dm-badge-offplan: var(--dm-gold);  /* Off-plan                 */
  --dm-badge-verified:#3b82f6;   /* Verified listing               */
  --dm-badge-sold:    #6b7280;   /* Sold                           */

  /* ── Typography ───────────────────────────────────────────────── */
  --dm-font-sans:     'DM Sans', system-ui, -apple-system, sans-serif;
  --dm-font-display:  'Playfair Display', Georgia, 'Times New Roman', serif;
  --dm-font-mono:     'SFMono-Regular', Menlo, Consolas, monospace;

  /* Font sizes — fluid where possible */
  --dm-text-xs:    0.75rem;    /* 12px */
  --dm-text-sm:    0.875rem;   /* 14px */
  --dm-text-base:  1rem;       /* 16px */
  --dm-text-md:    1.0625rem;  /* 17px */
  --dm-text-lg:    1.125rem;   /* 18px */
  --dm-text-xl:    1.25rem;    /* 20px */
  --dm-text-2xl:   1.5rem;     /* 24px */
  --dm-text-3xl:   1.875rem;   /* 30px */
  --dm-text-4xl:   clamp(1.875rem, 4vw, 2.5rem);   /* hero/section */
  --dm-text-hero:  clamp(2.25rem, 5vw, 3.5rem);    /* hero H1      */

  /* Line heights */
  --dm-leading-tight:   1.2;
  --dm-leading-snug:    1.4;
  --dm-leading-normal:  1.6;
  --dm-leading-relaxed: 1.75;
  --dm-leading-loose:   1.875;

  /* ── Spacing ───────────────────────────────────────────────────── */
  --dm-space-1:  0.25rem;
  --dm-space-2:  0.5rem;
  --dm-space-3:  0.75rem;
  --dm-space-4:  1rem;
  --dm-space-5:  1.25rem;
  --dm-space-6:  1.5rem;
  --dm-space-8:  2rem;
  --dm-space-10: 2.5rem;
  --dm-space-12: 3rem;
  --dm-space-16: 4rem;
  --dm-space-20: 5rem;
  --dm-space-24: 6rem;

  /* ── Border radius ─────────────────────────────────────────────── */
  --dm-radius-sm:   0.25rem;
  --dm-radius-md:   0.5rem;
  --dm-radius-lg:   0.75rem;
  --dm-radius-xl:   1rem;
  --dm-radius-2xl:  1.25rem;
  --dm-radius-3xl:  1.5rem;
  --dm-radius-pill: 9999px;

  /* ── Shadows ───────────────────────────────────────────────────── */
  --dm-shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.05);
  --dm-shadow-sm:  0 2px 6px rgba(0, 0, 0, 0.07);
  --dm-shadow-md:  0 4px 12px rgba(0, 0, 0, 0.10);
  --dm-shadow-lg:  0 10px 24px rgba(0, 0, 0, 0.12);
  --dm-shadow-xl:  0 20px 48px rgba(0, 0, 0, 0.14);
  --dm-shadow-gold: 0 8px 32px rgba(201, 169, 110, 0.20);
  --dm-shadow-card: 0 2px 8px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);

  /* ── Z-index ladder ────────────────────────────────────────────── */
  --dm-z-base:    1;
  --dm-z-card:    10;
  --dm-z-sticky:  50;
  --dm-z-nav:     100;
  --dm-z-modal:   200;
  --dm-z-toast:   300;

  /* ── Transitions ───────────────────────────────────────────────── */
  --dm-ease:         cubic-bezier(0.4, 0, 0.2, 1);
  --dm-ease-out:     cubic-bezier(0, 0, 0.2, 1);
  --dm-ease-bounce:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --dm-duration-fast:   150ms;
  --dm-duration-base:   250ms;
  --dm-duration-slow:   400ms;
  --dm-transition:   all var(--dm-duration-base) var(--dm-ease);

  /* ── Layout ────────────────────────────────────────────────────── */
  --dm-container-sm:  640px;
  --dm-container-md:  768px;
  --dm-container-lg:  1024px;
  --dm-container-xl:  1280px;
  --dm-container-2xl: 1400px;

  /* ── Property card specifics ───────────────────────────────────── */
  --dm-card-img-height:     240px;
  --dm-card-img-height-lg:  280px;
  --dm-card-border:         var(--dm-border);
  --dm-card-radius:         var(--dm-radius-xl);
  --dm-card-shadow:         var(--dm-shadow-card);
  --dm-card-shadow-hover:   var(--dm-shadow-lg);
}

/* ── DARK MODE overrides ────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root {
    --dm-text-primary:  #f1f5f9;
    --dm-text-body:     #cbd5e1;
    --dm-text-muted:    #94a3b8;
    --dm-text-hint:     #64748b;

    --dm-bg-page:       #0d1120;
    --dm-bg-surface:    #1a1a2e;
    --dm-bg-subtle:     #16213e;
    --dm-bg-gold-wash:  rgba(201, 169, 110, 0.06);

    --dm-border:        rgba(255, 255, 255, 0.10);
    --dm-border-strong: rgba(255, 255, 255, 0.18);

    --dm-shadow-card:   0 2px 8px rgba(0, 0, 0, 0.40), 0 1px 2px rgba(0, 0, 0, 0.30);
    --dm-shadow-lg:     0 10px 24px rgba(0, 0, 0, 0.50);
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   GLOBAL RESETS & BASE STYLES
   ══════════════════════════════════════════════════════════════════════ */

html {
  font-family:              var(--dm-font-sans);
  font-size:                16px;
  line-height:              var(--dm-leading-normal);
  color:                    var(--dm-text-primary);
  background-color:         var(--dm-bg-page);
  -webkit-font-smoothing:   antialiased;
  -moz-osx-font-smoothing:  grayscale;
  scroll-behavior:          smooth;
}

/* Display headings — always Playfair */
h1, h2, h3,
.dm-heading,
.dm-display {
  font-family: var(--dm-font-display);
  font-weight: 700;
  line-height: var(--dm-leading-tight);
  color:       var(--dm-text-primary);
}

h4, h5, h6 {
  font-family: var(--dm-font-sans);
  font-weight: 600;
  line-height: var(--dm-leading-snug);
}

p {
  line-height: var(--dm-leading-relaxed);
  color:       var(--dm-text-body);
}

/* ══════════════════════════════════════════════════════════════════════════
   TAILWIND OVERRIDE MAP
   Drop this after the Tailwind stylesheet to unify the primary colour.
   ══════════════════════════════════════════════════════════════════════ */

/* Retire the orange blog accent — absorb into gold */
.bg-\[\#E16036\],
.text-\[\#E16036\],
.hover\:text-\[\#E16036\]:hover {
  background-color: var(--dm-gold) !important;
  color:            var(--dm-gold) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   TYPOGRAPHY UTILITIES
   ══════════════════════════════════════════════════════════════════════ */

.dm-text-hero   { font-size: var(--dm-text-hero);  font-family: var(--dm-font-display); font-weight: 800; line-height: var(--dm-leading-tight); }
.dm-text-4xl    { font-size: var(--dm-text-4xl);   font-family: var(--dm-font-display); font-weight: 700; }
.dm-text-3xl    { font-size: var(--dm-text-3xl);   font-family: var(--dm-font-display); font-weight: 700; }
.dm-text-2xl    { font-size: var(--dm-text-2xl);   font-family: var(--dm-font-display); font-weight: 700; }
.dm-text-xl     { font-size: var(--dm-text-xl);    font-weight: 600; }
.dm-text-lg     { font-size: var(--dm-text-lg);    font-weight: 500; }
.dm-text-base   { font-size: var(--dm-text-base); }
.dm-text-sm     { font-size: var(--dm-text-sm);    color: var(--dm-text-muted); }
.dm-text-xs     { font-size: var(--dm-text-xs);    color: var(--dm-text-hint); }
.dm-text-gold   { color: var(--dm-gold); }
.dm-text-inverse{ color: var(--dm-text-inverse); }

/* ══════════════════════════════════════════════════════════════════════════
   PROPERTY CARD — LUXURY VERSION
   Drop-in replacement for .modern-property-card
   ══════════════════════════════════════════════════════════════════════ */

.dm-property-card {
  position:         relative;
  background:       var(--dm-bg-surface);
  border-radius:    var(--dm-card-radius);
  border:           1px solid var(--dm-card-border);
  box-shadow:       var(--dm-card-shadow);
  overflow:         hidden;
  transition:       transform var(--dm-duration-base) var(--dm-ease),
                    box-shadow var(--dm-duration-base) var(--dm-ease);
}
.dm-property-card:hover {
  transform:    translateY(-4px);
  box-shadow:   var(--dm-card-shadow-hover);
}

/* Image container with overlay badge system */
.dm-card-img-wrap {
  position:   relative;
  height:     var(--dm-card-img-height);
  overflow:   hidden;
  background: var(--dm-bg-subtle);
}
.dm-card-img-wrap img {
  width:       100%;
  height:      100%;
  object-fit:  cover;
  transition:  transform var(--dm-duration-slow) var(--dm-ease);
}
.dm-property-card:hover .dm-card-img-wrap img {
  transform: scale(1.04);
}

/* Dark scrim at bottom of image */
.dm-card-img-wrap::after {
  content:    '';
  position:   absolute;
  inset:      auto 0 0;
  height:     55%;
  background: linear-gradient(to top, rgba(13, 17, 32, 0.78), transparent);
  pointer-events: none;
}

/* Price badge — overlaid bottom-left of image */
.dm-card-price {
  position:    absolute;
  bottom:      var(--dm-space-3);
  left:        var(--dm-space-3);
  z-index:     2;
  font-family: var(--dm-font-display);
  font-size:   var(--dm-text-xl);
  font-weight: 700;
  color:       #ffffff;
  text-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
[dir=rtl] .dm-card-price { left: auto; right: var(--dm-space-3); }

/* Status pills — overlaid top-left */
.dm-card-badges {
  position:    absolute;
  top:         var(--dm-space-3);
  left:        var(--dm-space-3);
  z-index:     2;
  display:     flex;
  gap:         var(--dm-space-1);
  flex-wrap:   wrap;
}
[dir=rtl] .dm-card-badges { left: auto; right: var(--dm-space-3); }

.dm-badge {
  display:         inline-flex;
  align-items:     center;
  gap:             4px;
  padding:         3px 10px;
  border-radius:   var(--dm-radius-pill);
  font-size:       0.6875rem;
  font-weight:     700;
  letter-spacing:  0.06em;
  text-transform:  uppercase;
  backdrop-filter: blur(4px);
}
.dm-badge-new      { background: rgba(16, 185, 129, 0.85); color: #fff; }
.dm-badge-hot      { background: rgba(239, 68, 68, 0.85);  color: #fff; }
.dm-badge-offplan  { background: rgba(201, 169, 110, 0.90); color: #1a1a2e; }
.dm-badge-verified { background: rgba(59, 130, 246, 0.85); color: #fff; }
.dm-badge-sold     { background: rgba(107, 114, 128, 0.85); color: #fff; }

/* Wishlist heart — top-right */
.dm-card-wish {
  position:    absolute;
  top:         var(--dm-space-3);
  right:       var(--dm-space-3);
  z-index:     2;
  width:       34px;
  height:      34px;
  border-radius: var(--dm-radius-pill);
  background:  rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(4px);
  border:      1px solid rgba(255,255,255,0.25);
  display:     flex;
  align-items: center;
  justify-content: center;
  cursor:      pointer;
  transition:  background var(--dm-duration-fast) var(--dm-ease);
}
.dm-card-wish:hover { background: rgba(255,255,255,0.30); }
[dir=rtl] .dm-card-wish { right: auto; left: var(--dm-space-3); }

/* Card body */
.dm-card-body {
  padding: var(--dm-space-4) var(--dm-space-5);
}

.dm-card-title {
  font-family:   var(--dm-font-display);
  font-size:     var(--dm-text-lg);
  font-weight:   700;
  color:         var(--dm-text-primary);
  margin-bottom: var(--dm-space-1);
  line-height:   var(--dm-leading-snug);
}
.dm-card-title a {
  color:       inherit;
  text-decoration: none;
  transition:  color var(--dm-duration-fast) var(--dm-ease);
}
.dm-card-title a:hover { color: var(--dm-gold); }

/* Neighbourhood tag */
.dm-card-location {
  display:       flex;
  align-items:   center;
  gap:           var(--dm-space-1);
  font-size:     var(--dm-text-sm);
  color:         var(--dm-text-muted);
  margin-bottom: var(--dm-space-3);
}

/* Feature chips: beds / baths / sqm */
.dm-card-features {
  display:         flex;
  gap:             var(--dm-space-4);
  flex-wrap:       wrap;
  font-size:       var(--dm-text-sm);
  color:           var(--dm-text-body);
  padding:         var(--dm-space-3) 0;
  border-top:      1px solid var(--dm-border);
  border-bottom:   1px solid var(--dm-border);
  margin-bottom:   var(--dm-space-3);
}
.dm-card-feature {
  display:     flex;
  align-items: center;
  gap:         var(--dm-space-1);
  font-weight: 500;
}

/* CTA buttons */
.dm-card-actions {
  display: flex;
  gap:     var(--dm-space-2);
}

.dm-btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--dm-space-2);
  border-radius:   var(--dm-radius-md);
  font-family:     var(--dm-font-sans);
  font-size:       var(--dm-text-sm);
  font-weight:     600;
  cursor:          pointer;
  transition:      var(--dm-transition);
  text-decoration: none;
  white-space:     nowrap;
  border:          none;
  padding:         var(--dm-space-2) var(--dm-space-5);
}
.dm-btn:focus-visible {
  outline:        2px solid var(--dm-gold);
  outline-offset: 2px;
}

.dm-btn-primary {
  background: var(--dm-gold);
  color:      var(--dm-navy);
  flex:       1;
}
.dm-btn-primary:hover {
  background: var(--dm-gold-deep);
  box-shadow: var(--dm-shadow-gold);
}

.dm-btn-ghost {
  background: transparent;
  border:     1.5px solid var(--dm-border);
  color:      var(--dm-text-body);
}
.dm-btn-ghost:hover {
  border-color: var(--dm-gold);
  color:        var(--dm-gold);
}

/* ══════════════════════════════════════════════════════════════════════════
   ARTICLE CSS — RENAMED TOKENS
   Replace --pp-* usages in agent-articles.css with these.
   ══════════════════════════════════════════════════════════════════════ */

/* Alias map: old → new */
:root {
  --pp-navy:      var(--dm-navy);        /* was --pp-navy      */
  --pp-navy2:     var(--dm-navy-mid);    /* was --pp-navy2     */
  --pp-navy3:     var(--dm-navy-light);  /* was --pp-navy3     */
  --pp-gold:      var(--dm-gold);        /* was --pp-gold      */
  --pp-gold2:     var(--dm-gold-deep);   /* was --pp-gold2     */
  --pp-gold-pale: var(--dm-gold-pale);   /* was --pp-gold-pale */
  --pp-text:      var(--dm-text-primary);
  --pp-border:    var(--dm-border);
  --pp-bg:        var(--dm-bg-page);
}
/* NOTE: After sprint 1, do a codebase find-replace of --pp- → --dm-
   and remove these aliases. They are a temporary bridge only.      */

/* ══════════════════════════════════════════════════════════════════════════
   PAGE LOAD ANIMATIONS
   ══════════════════════════════════════════════════════════════════════ */

@keyframes dm-fade-up {
  from {
    opacity:   0;
    transform: translateY(20px);
  }
  to {
    opacity:   1;
    transform: translateY(0);
  }
}

@keyframes dm-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Apply these to sections / hero / card grids */
.dm-animate {
  animation: dm-fade-up var(--dm-duration-slow) var(--dm-ease-out) both;
}

/* Stagger children of a grid */
.dm-stagger > *:nth-child(1) { animation-delay: 0ms;   }
.dm-stagger > *:nth-child(2) { animation-delay: 80ms;  }
.dm-stagger > *:nth-child(3) { animation-delay: 160ms; }
.dm-stagger > *:nth-child(4) { animation-delay: 240ms; }
.dm-stagger > *:nth-child(5) { animation-delay: 320ms; }
.dm-stagger > *:nth-child(6) { animation-delay: 400ms; }
.dm-stagger > *:nth-child(n+7) { animation-delay: 480ms; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .dm-animate,
  .dm-stagger > * {
    animation: none;
    opacity:   1;
    transform: none;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   DARK SURFACES (navbar, hero, footer)
   ══════════════════════════════════════════════════════════════════════ */

.dm-surface-dark {
  background-color: var(--dm-navy);
  color:            var(--dm-text-inverse);
}
.dm-surface-gradient {
  background: linear-gradient(135deg, var(--dm-navy) 0%, var(--dm-navy-mid) 55%, var(--dm-navy-light) 100%);
  color:      var(--dm-text-inverse);
}

/* Gold separator line (use instead of <hr>) */
.dm-divider-gold {
  height:     2px;
  background: linear-gradient(90deg, var(--dm-gold), transparent);
  border:     none;
  margin:     var(--dm-space-8) 0;
}
[dir=rtl] .dm-divider-gold {
  background: linear-gradient(270deg, var(--dm-gold), transparent);
}