/* ============================================================
   MERIDIAN ESTATES — DESIGN SYSTEM
   Design Tokens · Typography · Color · Spacing · Motion
   ============================================================ */

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

:root {

  /* ── PRIMARY PALETTE ───────────────────────── */
  --midnight-navy:   #0B1220;
  --deep-slate:      #111827;
  --luxury-black:    #0A0A0A;

  /* ── SECONDARY PALETTE ─────────────────────── */
  --warm-white:      #F8F6F2;
  --soft-sand:       #E9E2D8;
  --cool-gray:       #D1D5DB;

  /* ── ACCENT PALETTE ────────────────────────── */
  --champagne-gold:       #ffffff;
  --champagne-gold-light: #e8e6e2;
  --champagne-gold-dark:  #d0ccc7;
  --champagne-gold-muted: rgba(255, 255, 255, 0.25);
  --muted-sage:           #7B8D7A;
  --muted-sage-light:     #9BAA9A;

  /* ── SEMANTIC ALIASES ──────────────────────── */
  --bg-primary:     var(--luxury-black);
  --bg-dark:        var(--midnight-navy);
  --bg-medium:      var(--deep-slate);
  --bg-light:       var(--warm-white);
  --bg-sand:        var(--soft-sand);

  --text-on-dark:   var(--warm-white);
  --text-on-light:  var(--luxury-black);
  --text-secondary: var(--cool-gray);
  --text-tertiary:  rgba(209, 213, 219, 0.55);
  --text-gold:      var(--champagne-gold);
  --text-sage:      var(--muted-sage);

  --border-dark:    rgba(255, 255, 255, 0.08);
  --border-medium:  rgba(255, 255, 255, 0.14);
  --border-gold:    rgba(255,255,255, 0.28);
  --border-light:   rgba(0, 0, 0, 0.08);

  /* ── GLASSMORPHISM ─────────────────────────── */
  --glass-dark:        rgba(11, 18, 32, 0.72);
  --glass-dark-heavy:  rgba(10, 10, 10, 0.88);
  --glass-light:       rgba(248, 246, 242, 0.90);
  --glass-gold:        rgba(255,255,255, 0.10);
  --glass-blur:        blur(24px);
  --glass-blur-heavy:  blur(40px);
  --glass-blur-light:  blur(12px);

  /* ── TYPOGRAPHY ────────────────────────────── */
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-black:    900;

  /* Fluid type scale — base 16px at 1440px viewport */
  --text-11:  clamp(0.625rem, 0.8vw,  0.6875rem);
  --text-12:  clamp(0.688rem, 0.9vw,  0.75rem);
  --text-13:  clamp(0.75rem,  0.95vw, 0.8125rem);
  --text-14:  clamp(0.8rem,   1vw,    0.875rem);
  --text-16:  clamp(0.875rem, 1.1vw,  1rem);
  --text-18:  clamp(1rem,     1.3vw,  1.125rem);
  --text-20:  clamp(1.1rem,   1.5vw,  1.25rem);
  --text-24:  clamp(1.25rem,  1.8vw,  1.5rem);
  --text-28:  clamp(1.4rem,   2.1vw,  1.75rem);
  --text-32:  clamp(1.6rem,   2.5vw,  2rem);
  --text-40:  clamp(2rem,     3vw,    2.5rem);
  --text-48:  clamp(2.4rem,   3.8vw,  3rem);
  --text-56:  clamp(2.8rem,   4.2vw,  3.5rem);
  --text-64:  clamp(3.2rem,   5vw,    4rem);
  --text-80:  clamp(3.5rem,   6vw,    5rem);
  --text-96:  clamp(4rem,     7.5vw,  6rem);
  --text-120: clamp(5rem,     9vw,    7.5rem);
  --text-160: clamp(6rem,     12vw,   10rem);

  /* Letter spacing */
  --tracking-tighter: -0.04em;
  --tracking-tight:   -0.02em;
  --tracking-snug:    -0.01em;
  --tracking-normal:   0em;
  --tracking-wide:     0.04em;
  --tracking-wider:    0.08em;
  --tracking-widest:   0.18em;
  --tracking-ultra:    0.28em;

  /* Line height */
  --leading-none:    1;
  --leading-tightest: 1.05;
  --leading-tight:   1.15;
  --leading-snug:    1.28;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;
  --leading-loose:   1.8;

  /* ── SPACING SCALE (4px base) ──────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-28: 112px;
  --space-32: 128px;
  --space-40: 160px;
  --space-48: 192px;
  --space-64: 256px;

  /* Fluid section padding */
  --section-py:    clamp(80px, 10vw, 160px);
  --section-py-sm: clamp(60px, 7vw,  120px);
  --section-py-lg: clamp(100px, 13vw, 200px);
  --section-py-xl: clamp(120px, 15vw, 240px);

  /* Container */
  --container-max:    1400px;
  --container-wide:   1600px;
  --container-narrow: 960px;
  --container-xs:     680px;
  --container-px:     clamp(24px, 5vw, 80px);

  /* ── BORDER RADIUS ─────────────────────────── */
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-2xl:  32px;
  --radius-3xl:  48px;
  --radius-full: 9999px;

  /* ── SHADOWS ───────────────────────────────── */
  --shadow-xs:   0 1px 4px rgba(0,0,0,0.15);
  --shadow-sm:   0 2px 8px rgba(0,0,0,0.22);
  --shadow-md:   0 4px 24px rgba(0,0,0,0.32);
  --shadow-lg:   0 8px 48px rgba(0,0,0,0.45);
  --shadow-xl:   0 16px 64px rgba(0,0,0,0.55);
  --shadow-2xl:  0 24px 96px rgba(0,0,0,0.65);
  --shadow-inner: inset 0 2px 8px rgba(0,0,0,0.25);
  --shadow-gold:    0 8px 40px rgba(255,255,255, 0.38);
  --shadow-gold-sm: 0 2px 20px rgba(255,255,255, 0.28);

  /* ── Z-INDEX ───────────────────────────────── */
  --z-below:    -1;
  --z-base:      0;
  --z-above:     1;
  --z-card:      10;
  --z-sticky:    100;
  --z-nav:       200;
  --z-overlay:   300;
  --z-modal:     400;
  --z-cursor:    600;

  /* ── NAVIGATION ────────────────────────────── */
  --nav-height:         88px;
  --nav-height-compact: 64px;

  /* ── MOTION ────────────────────────────────── */
  --ease-luxury:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-smooth:  cubic-bezier(0.4, 0, 0.2, 1);
  --ease-snappy:  cubic-bezier(0.77, 0, 0.175, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out:     cubic-bezier(0, 0, 0.2, 1);

  --dur-instant:  80ms;
  --dur-fast:     180ms;
  --dur-base:     320ms;
  --dur-slow:     550ms;
  --dur-slower:   800ms;
  --dur-slowest:  1100ms;

  /* ── GRADIENTS ─────────────────────────────── */
  --grad-dark-overlay:     linear-gradient(to bottom, rgba(10,10,10,0.15) 0%, rgba(10,10,10,0.65) 55%, rgba(10,10,10,0.97) 100%);
  --grad-dark-vignette:    radial-gradient(ellipse at center, transparent 30%, rgba(10,10,10,0.7) 100%);
  --grad-dark-left:        linear-gradient(to right, rgba(10,10,10,0.95) 0%, rgba(10,10,10,0.5) 55%, transparent 100%);
  --grad-navy-overlay:     linear-gradient(to bottom, rgba(11,18,32,0.25) 0%, rgba(11,18,32,0.92) 100%);
  --grad-gold:             linear-gradient(135deg, var(--champagne-gold) 0%, var(--champagne-gold-light) 100%);
  --grad-gold-subtle:      linear-gradient(135deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.04) 100%);
  --grad-to-dark-bottom:   linear-gradient(to bottom, transparent 0%, var(--luxury-black) 100%);
  --grad-to-dark-top:      linear-gradient(to top, transparent 0%, var(--luxury-black) 100%);
  --grad-section-dark:     linear-gradient(180deg, var(--luxury-black) 0%, var(--midnight-navy) 100%);
}

/* ============================================================
   TYPOGRAPHIC UTILITY CLASSES
   ============================================================ */

.type-display {
  font-family: var(--font-display);
  font-size: var(--text-160);
  font-weight: var(--weight-regular);
  line-height: var(--leading-none);
  letter-spacing: var(--tracking-tight);
}
.type-display-xl {
  font-family: var(--font-display);
  font-size: var(--text-120);
  font-weight: var(--weight-regular);
  line-height: var(--leading-tightest);
  letter-spacing: var(--tracking-tight);
}
.type-display-lg {
  font-family: var(--font-display);
  font-size: var(--text-96);
  font-weight: var(--weight-regular);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-snug);
}
.type-h1 {
  font-family: var(--font-display);
  font-size: var(--text-80);
  font-weight: var(--weight-regular);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-snug);
}
.type-h2 {
  font-family: var(--font-display);
  font-size: var(--text-64);
  font-weight: var(--weight-regular);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-snug);
}
.type-h3 {
  font-family: var(--font-display);
  font-size: var(--text-48);
  font-weight: var(--weight-regular);
  line-height: var(--leading-snug);
}
.type-h4 {
  font-family: var(--font-display);
  font-size: var(--text-32);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
}
.type-h5 {
  font-family: var(--font-display);
  font-size: var(--text-24);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
}
.type-body-xl {
  font-family: var(--font-body);
  font-size: var(--text-20);
  font-weight: var(--weight-light);
  line-height: var(--leading-relaxed);
}
.type-body-lg {
  font-family: var(--font-body);
  font-size: var(--text-18);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
}
.type-body {
  font-family: var(--font-body);
  font-size: var(--text-16);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
}
.type-body-sm {
  font-family: var(--font-body);
  font-size: var(--text-14);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
}
.type-label {
  font-family: var(--font-body);
  font-size: var(--text-11);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
}
.type-label-md {
  font-family: var(--font-body);
  font-size: var(--text-12);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}
.type-label-lg {
  font-family: var(--font-body);
  font-size: var(--text-14);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.type-stat {
  font-family: var(--font-display);
  font-size: var(--text-96);
  font-weight: var(--weight-light);
  line-height: var(--leading-none);
  letter-spacing: var(--tracking-tighter);
}
.type-price {
  font-family: var(--font-display);
  font-size: var(--text-32);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-snug);
}
.type-price-lg {
  font-family: var(--font-display);
  font-size: var(--text-48);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-tight);
}