/* ═══════════════════════════════════════════════════
   Design System — Zillow Typography + Elevation
   Housing Grades Product
   ═══════════════════════════════════════════════════ */

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

/* ── Color System ── */
:root {
  /* Primary — teal brand color */
  --md-primary:              #00d4aa;
  --md-on-primary:           #ffffff;
  --md-primary-container:    #b2f2e3;
  --md-on-primary-container: #00382d;

  /* Secondary — amber for Watch */
  --md-secondary:              #f5c518;
  --md-on-secondary:           #1a1200;
  --md-secondary-container:    #fdefc6;
  --md-on-secondary-container: #231a00;

  /* Tertiary — for accent/neutral */
  --md-tertiary:              #8b8fa8;
  --md-on-tertiary:           #ffffff;
  --md-tertiary-container:    #e2e3f0;
  --md-on-tertiary-container: #191c2c;

  /* Error */
  --md-error:              #ef4444;
  --md-on-error:           #ffffff;
  --md-error-container:    #fde8e8;
  --md-on-error-container: #7a0000;

  /* Surface — Zillow-inspired warm gray page bg + white cards */
  --md-surface:                    #ffffff;
  --md-surface-dim:                #f4f6f8;
  --md-surface-bright:             #ffffff;
  --md-surface-container-lowest:   #ffffff;
  --md-surface-container-low:      #f8f9fa;
  --md-surface-container:          #f4f6f8;
  --md-surface-container-high:     #e9ebec;
  --md-surface-container-highest:  #e2e4e5;

  /* Text — Zillow palette */
  --md-on-surface:         #2A2A33;
  --md-on-surface-variant: #767676;
  --md-outline:            #e5e7eb;
  --md-outline-variant:    #f3f4f6;

  /* Semantic aliases */
  --color-bg:         var(--md-surface);
  --color-surface:    var(--md-surface-container-low);
  --color-border:     var(--md-outline);
  --color-text:       var(--md-on-surface);
  --color-text-muted: var(--md-on-surface-variant);
  --color-hc:         var(--md-primary);
  --color-watch:      var(--md-secondary);
  --color-neutral:    var(--md-tertiary);
  --color-lc:         #d1d5db;
  --color-easing:     #3b82f6;
  --color-tightening: var(--md-error);
  --color-amber:      #f59e0b;
  --color-strong-value: #059669;
  --color-fair-value:   var(--md-on-surface-variant);
  --color-priced-high:  #d97706;

  /* Font families */
  --font-display: 'Playfair Display', serif;
  --font-ui: 'Plus Jakarta Sans', sans-serif;
  --font-number: 'Outfit', sans-serif;

  /* Shape scale */
  --m3-shape-xs:   4px;
  --m3-shape-sm:   8px;
  --m3-shape-md:   12px;
  --m3-shape-lg:   16px;
  --m3-shape-xl:   24px;
  --m3-shape-full: 9999px;

  /* Spacing (4dp grid) */
  --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;

  /* Elevation — Zillow shadow-based */
  --elevation-0: none;
  --elevation-1: 0 2px 8px rgba(0,0,0,0.10);
  --elevation-2: 0 4px 16px rgba(0,0,0,0.14);
  --elevation-3: 0 8px 32px rgba(0,0,0,0.16);
  --elevation-nav: 0 1px 4px rgba(0,0,0,0.08);
}

/* ── Base Typography ── */
html { height: 100%; }
body {
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.25px;
  background: #f4f6f8;
  color: var(--md-on-surface);
  min-height: 100%;
}

/* ── Zillow Data Tables ── */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-ui);
  font-size: 13px;
}
.data-table th {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #767676;
  text-align: right;
  padding: 8px 16px;
  border-bottom: 1px solid #e5e7eb;
  background: none;
}
.data-table th:first-child { text-align: left; }
.data-table td {
  padding: 10px 16px;
  color: #2A2A33;
  text-align: right;
  border-bottom: 1px solid #f0f0f0;
  line-height: 1.4;
  font-family: var(--font-number);
  font-weight: 500;
}
.data-table td:first-child {
  text-align: left;
  color: #767676;
  font-family: var(--font-ui);
  font-weight: 400;
}
.data-table tr:last-child td { border-bottom: none; }
.data-table tr.total td {
  font-weight: 600;
  color: #2A2A33;
  border-bottom: 2px solid #e5e7eb;
}
.data-table tr.highlighted {
  background: #f8f9fa;
}
.data-table tr.highlighted td {
  font-weight: 600;
}
.data-table tr.highlighted td:first-child {
  border-left: 3px solid #00d4aa;
  padding-left: 13px;
}
.val-positive { color: #00d4aa !important; }
.val-negative { color: #ef4444 !important; }
.val-severe { color: #ef4444 !important; font-weight: 600; }

/* ── Button System (Zillow CTA) ── */
.btn-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 16px;
  padding: 14px 24px;
  border-radius: 8px;
  background: #00d4aa;
  color: #ffffff;
  border: none;
  width: 100%;
  min-height: 48px;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
  text-decoration: none;
  text-align: center;
}
.btn-primary:hover { background: #00bfa0; transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); }
.btn-secondary {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 16px;
  padding: 14px 24px;
  border-radius: 8px;
  background: transparent;
  border: 2px solid #00d4aa;
  color: #00d4aa;
  width: 100%;
  min-height: 48px;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
  text-decoration: none;
  text-align: center;
}
.btn-secondary:hover { background: rgba(0,212,170,0.06); transform: translateY(-1px); }
.btn-secondary:active { transform: translateY(0); }
.btn-ghost {
  display: inline-flex;
  align-items: center;
  background: transparent;
  border: none;
  color: #00d4aa;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 14px;
  padding: 8px 0;
  cursor: pointer;
  text-decoration: underline;
  transition: color 0.15s;
}
.btn-ghost:hover { color: #00bfa0; }
.btn-auto { width: auto; min-width: 240px; }
.btn-disabled {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 16px;
  padding: 14px 24px;
  border-radius: 8px;
  background: #f4f6f8;
  color: #d1d5db;
  border: none;
  width: 100%;
  min-height: 48px;
  pointer-events: none;
  text-decoration: none;
  text-align: center;
}

/* ── Disclaimer Footer ── */
.site-disclaimer {
  padding: var(--space-5) var(--space-8);
  border-top: 1px solid var(--md-outline);
  background: var(--md-surface);
  font-family: var(--font-ui);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.4px;
  color: var(--md-on-surface-variant);
}

/* ── Responsive base ── */
@media (max-width: 768px) {
  .site-disclaimer { padding: var(--space-4); font-size: 11px; }
}