/* ============================================
   BuildMyListing — Design Tokens
   Luxury editorial aesthetic for real estate
   ============================================ */

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

:root {
  /* ── Core Palette ── */
  --navy:          #1a1f36;
  --navy-light:    #252b48;
  --navy-dark:     #0f1225;
  --gold:          #d4a843;
  --gold-light:    #e8c776;
  --gold-dark:     #b8912e;
  --gold-muted:    #d4a84320;
  --emerald:       #059669;
  --emerald-light: #34d399;
  --cream:         #fafaf8;
  --cream-warm:    #f5f0e8;
  --cream-dark:    #ede7d9;
  --charcoal:      #1f2937;
  --slate:         #64748b;
  --slate-light:   #94a3b8;
  --white:         #ffffff;
  --red:           #dc2626;
  --red-light:     #fef2f2;
  --amber:         #f59e0b;

  /* ── Semantic Colors ── */
  --bg-primary:    var(--cream);
  --bg-surface:    var(--white);
  --bg-elevated:   var(--white);
  --bg-dark:       var(--navy);
  --bg-dark-alt:   var(--navy-light);

  --text-primary:   var(--charcoal);
  --text-secondary: var(--slate);
  --text-muted:     var(--slate-light);
  --text-inverse:   var(--cream);
  --text-gold:      var(--gold);

  --border-subtle:  #e5e7eb;
  --border-medium:  #d1d5db;
  --border-gold:    var(--gold);

  --accent:         var(--gold);
  --accent-hover:   var(--gold-dark);
  --success:        var(--emerald);
  --error:          var(--red);
  --warning:        var(--amber);

  /* ── Typography ── */
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:    'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.25rem;    /* 20px */
  --text-2xl:  1.5rem;     /* 24px */
  --text-3xl:  1.875rem;   /* 30px */
  --text-4xl:  2.25rem;    /* 36px */
  --text-5xl:  3rem;       /* 48px */
  --text-6xl:  3.75rem;    /* 60px */
  --text-7xl:  4.5rem;     /* 72px */

  --leading-tight:  1.15;
  --leading-snug:   1.3;
  --leading-normal: 1.6;
  --leading-loose:  1.8;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.05em;
  --tracking-wider:  0.1em;

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

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

  --sidebar-width: 260px;
  --header-height: 64px;

  /* ── Borders & Radius ── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  /* ── Shadows ── */
  --shadow-xs:   0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm:   0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md:   0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.04);
  --shadow-lg:   0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04);
  --shadow-xl:   0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
  --shadow-2xl:  0 25px 50px -12px rgba(0, 0, 0, 0.2);
  --shadow-gold: 0 4px 14px rgba(212, 168, 67, 0.3);
  --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.05);

  /* ── Transitions ── */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-fast:   150ms;
  --duration-normal: 300ms;
  --duration-slow:   500ms;
  --duration-slower: 800ms;

  /* ── Z-Index ── */
  --z-base:     1;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;
}

/* ── Dark variant (for nav on dark sections) ── */
[data-theme="dark"] {
  --bg-primary:    var(--navy);
  --bg-surface:    var(--navy-light);
  --text-primary:  var(--cream);
  --text-secondary: var(--slate-light);
  --border-subtle: rgba(255, 255, 255, 0.1);
}