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

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

:root {
  --bg-page: #050506;
  --bg-elevated: #0a0a0c;
  --bg-card: #111114;
  --bg-card-hover: #18181c;
  --bg-input: #0d0d10;
  --border-subtle: rgba(255,255,255,0.06);
  --border-default: rgba(255,255,255,0.1);
  --border-hover: rgba(255,255,255,0.15);
  --text-primary: #fafafa;
  --text-secondary: #a0a0a8;
  --text-muted: #606068;
  --accent-green: #22c55e;
  --accent-green-glow: rgba(34,197,94,0.15);
  --brand-green: #1B5E20;
  --radius-card: 16px;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  background: var(--bg-page);
  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(34,197,94,0.15); color: #22c55e; }
.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: #22c55e;
  margin-top: 4px;
}

.savings-line.above {
  color: #f59e0b;
}