/* shared.css — CSS custom properties, resets, typography, common components */

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

:root {
  --bg-primary: #0a0e14;
  --bg-secondary: #0d1117;
  --bg-surface: #151b23;
  --bg-surface-hover: #1c2333;
  --bg-input: #0d1117;
  --border: rgba(255,255,255,0.06);
  --border-default: rgba(255,255,255,0.1);
  --border-hover: rgba(255,255,255,0.15);
  --text-primary: #e6edf3;
  --text-secondary: #8b949e;
  --text-muted: #484f58;
  --accent: #4ade80;
  --accent-dark: #1B5E20;
  --accent-glow: rgba(74,222,128,0.15);
  --danger: #f87171;
  --warning: #fbbf24;
  --radius: 2px;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  background: var(--bg-primary);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Value Labels — used in both landing showcase and check-listing results */
.value-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 100px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.value-badge.great-value { background: rgba(74,222,128,0.15); color: #4ade80; }
.value-badge.good-value { background: rgba(74,222,128,0.12); color: #4ade80; }
.value-badge.fair-price { background: rgba(161,161,170,0.12); color: #a1a1aa; }
.value-badge.above-average { background: rgba(250,204,21,0.12); color: #facc15; }
.value-badge.overpriced { background: rgba(239,68,68,0.12); color: #ef4444; }

.market-context {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 4px;
}

.savings-line {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--accent);
  margin-top: 4px;
}

.savings-line.above {
  color: var(--warning);
}