/* ============================================================
   BASE.CSS — Global reset, custom properties, typography, utilities
   Real Estate World Real Estate Blog — Modern UI Refresh
   ============================================================ */

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

/* ============================================================
   CSS Custom Properties — Light Mode Defaults
   ============================================================ */
:root {
  /* Brand */
  --color-primary:       #0EA5E9;
  --color-primary-dark:  #0284C7;
  --color-primary-light: #E0F2FE;
  --color-accent:        #6366F1; /* indigo accent for variety */

  /* Surface */
  --color-bg:            #ffffff;
  --color-bg-secondary:  #f8fafc;
  --color-bg-tertiary:   #f1f5f9;
  --color-bg-card:       #ffffff;

  /* Text */
  --color-text:          #0f172a;
  --color-text-secondary:#475569;
  --color-text-muted:    #94a3b8;

  /* Borders */
  --color-border:        #e2e8f0;
  --color-border-light:  #f1f5f9;

  /* Shadows */
  --shadow-xs:  0 1px 2px rgba(15,23,42,0.06);
  --shadow-sm:  0 2px 8px rgba(15,23,42,0.08);
  --shadow-md:  0 4px 16px rgba(15,23,42,0.10);
  --shadow-lg:  0 8px 32px rgba(15,23,42,0.12);
  --shadow-xl:  0 16px 48px rgba(15,23,42,0.16);
  --shadow-hover: 0 20px 60px rgba(14,165,233,0.18);

  /* Callouts */
  --callout-info-bg:     #eff6ff;
  --callout-info-border: #3b82f6;
  --callout-info-text:   #1d4ed8;
  --callout-tip-bg:      #f0fdf4;
  --callout-tip-border:  #22c55e;
  --callout-tip-text:    #15803d;
  --callout-warning-bg:  #fffbeb;
  --callout-warning-border: #f59e0b;
  --callout-warning-text:#b45309;

  /* Typography */
  --font-body:      'Inter', system-ui, -apple-system, sans-serif;
  --font-heading:   'Playfair Display', Georgia, serif;
  --font-size-base: clamp(15px, 2vw, 17px);
  --font-size-sm:   clamp(12px, 1.5vw, 14px);
  --font-size-lg:   clamp(17px, 2.5vw, 20px);
  --line-height-body:    1.8;
  --line-height-heading: 1.2;

  /* Spacing scale */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* Layout */
  --max-width:     1200px;
  --header-height: 72px;
  --radius-sm:     6px;
  --radius-md:     12px;
  --radius-lg:     20px;
  --radius-xl:     28px;
  --radius-full:   9999px;

  /* Transitions */
  --t-fast:  0.15s ease;
  --t-base:  0.25s ease;
  --t-slow:  0.4s ease;
}

/* ============================================================
   Global Reset
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 100%;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  line-height: var(--line-height-body);
  color: var(--color-text);
  background-color: var(--color-bg);
  min-width: 360px;
  transition: background-color var(--t-base), color var(--t-base);
}

/* ============================================================
   Typography
   ============================================================ */
h1,h2,h3,h4,h5,h6 {
  font-family: var(--font-heading);
  line-height: var(--line-height-heading);
  color: var(--color-text);
  font-weight: 700;
  transition: color var(--t-base);
}

h1 { font-size: clamp(28px, 4.5vw, 46px); }
h2 { font-size: clamp(22px, 3.5vw, 32px); }
h3 { font-size: clamp(18px, 2.5vw, 24px); }
h4 { font-size: clamp(16px, 2vw, 20px); }

p {
  margin-bottom: var(--sp-4);
  color: var(--color-text);
  transition: color var(--t-base);
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--t-base), opacity var(--t-fast);
}
a:hover { color: var(--color-primary-dark); }

img { max-width: 100%; height: auto; display: block; }
ul, ol { padding-left: var(--sp-6); }
li { margin-bottom: var(--sp-1); }
button { cursor: pointer; font-family: var(--font-body); border: none; background: none; transition: all var(--t-base); }

/* ============================================================
   Focus Styles — Accessibility
   ============================================================ */
:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ============================================================
   Layout Utility
   ============================================================ */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--sp-6);
}
@media (max-width: 768px) { .container { padding: 0 var(--sp-4); } }

/* ============================================================
   Lazy Images — fade in on load
   ============================================================ */
.lazy-img {
  opacity: 0;
  transition: opacity var(--t-slow);
}
.lazy-img.loaded { opacity: 1; }

/* ============================================================
   Category Badge
   ============================================================ */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 11px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  background: linear-gradient(135deg, var(--color-primary-light), #dbeafe);
  color: var(--color-primary-dark);
  border: 1px solid rgba(14,165,233,0.2);
  transition: all var(--t-base);
}

/* ============================================================
   Gradient text utility
   ============================================================ */
.gradient-text {
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ============================================================
   Accessibility utility
   ============================================================ */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ============================================================
   Custom Scrollbar — global thin
   ============================================================ */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: var(--radius-full); }
::-webkit-scrollbar-thumb:hover { background: var(--color-text-muted); }