@import url('/styles/tokens.css');

@font-face {
  font-family: 'Terps Life Display';
  src: url('/brand/fonts/TerpsLifeDisplay-Regular.woff') format('woff'),
       url('/brand/fonts/TerpsLifeDisplay-Regular.ttf') format('truetype');
  font-display: swap;
}

@font-face {
  font-family: 'Terps Life Sans';
  src: url('/brand/fonts/TerpsLifeSans-Regular.woff') format('woff'),
       url('/brand/fonts/TerpsLifeSans-Regular.ttf') format('truetype');
  font-display: swap;
}

:root {
  --bg: var(--tl-canvas-primary, #080D10);
  --surface: var(--tl-canvas-surface, #0F181E);
  --surface-alt: #132029;
  --border: var(--tl-border-hairline, #1D2C36);
  --ink: var(--tl-ink-primary, #F2F7FB);
  --ink-muted: var(--tl-ink-secondary, #87A6B8);
  --primary: var(--tl-brand-primary, #0EB5D8);
  --secondary: var(--tl-brand-secondary, #7D4CEA);
  --accent: var(--tl-brand-accent, #BCF34D);
  --teal: #42CCAF;
  --amber: var(--tl-signal-disputed, #F59E0B);
  --rose: var(--tl-signal-combustion, #F43F5E);
  --font-display: 'Terps Life Display', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-sans: 'Terps Life Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: ui-monospace, 'SFMono-Regular', Menlo, monospace;
}

[data-theme='bright'] {
  --bg: #0B1318;
  --surface: #16242D;
  --surface-alt: #1B2D38;
  --border: #2B4251;
}

[data-theme='mist'] {
  --bg: #F4F8FA;
  --surface: #FFFFFF;
  --surface-alt: #EBF2F6;
  --border: #D2E0E8;
  --ink: #0A1217;
  --ink-muted: #39515F;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

.mono,
.tabular {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 20px;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  backdrop-filter: blur(14px);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  border-bottom: 1px solid var(--border);
}

.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
  flex-wrap: wrap;
  padding: 8px 0;
}

.nav-links {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.nav-pill {
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-muted);
  transition: border-color 150ms ease, color 150ms ease, background 150ms ease;
}

.nav-pill:hover,
.nav-pill.active {
  color: #080D10;
  background: var(--accent);
  border-color: var(--accent);
}

.theme-switch {
  display: inline-flex;
  gap: 4px;
  padding: 3px;
  border-radius: 999px;
  background: var(--bg);
  border: 1px solid var(--border);
}

.theme-btn {
  border: none;
  background: transparent;
  color: var(--ink-muted);
  font-size: 11px;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 999px;
  cursor: pointer;
}

.theme-btn.active {
  background: var(--primary);
  color: #080D10;
}

.hero {
  margin: 26px 0 22px;
  padding: 28px;
  border-radius: 20px;
  background: radial-gradient(circle at 85% 20%, rgba(14, 181, 216, 0.14), transparent 55%),
              radial-gradient(circle at 12% 85%, rgba(125, 76, 234, 0.16), transparent 48%),
              var(--surface);
  border: 1px solid var(--border);
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 24px;
  align-items: center;
}

.hero h1,
.display-heading {
  font-family: var(--font-display);
  letter-spacing: 0.02em;
  margin: 8px 0;
  line-height: 1.08;
}

.bento-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: 16px;
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 18px;
}

.card-interactive {
  transition: transform 150ms ease, border-color 150ms ease;
}

.card-interactive:hover {
  transform: translateY(-2px);
  border-color: var(--primary);
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  border: 1px solid var(--border);
  background: var(--bg);
}

.pill-verified { color: var(--accent); border-color: rgba(188, 243, 77, 0.45); }
.pill-disputed { color: var(--amber); border-color: rgba(245, 158, 11, 0.55); }
.pill-inferred { color: var(--primary); border-color: rgba(14, 181, 216, 0.45); border-style: dashed; }
.pill-combustion { color: var(--rose); border-color: rgba(244, 63, 94, 0.65); }

.bar-track {
  width: 100%;
  height: 7px;
  background: var(--bg);
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid var(--border);
}

.bar-fill {
  height: 100%;
  border-radius: 999px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  background: var(--surface-alt);
  color: var(--ink);
}

.btn-primary {
  background: linear-gradient(90deg, #7D4CEA 0%, #0EB5D8 55%, #BCF34D 100%);
  color: #080D10;
  border: none;
}

.input {
  width: 100%;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 14px;
}

.dial-range {
  width: 100%;
  accent-color: var(--primary);
}

.site-footer {
  margin-top: 48px;
  padding: 26px 0 40px;
  border-top: 1px solid var(--border);
  color: var(--ink-muted);
  font-size: 12px;
}

.age-gate-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(8, 13, 16, 0.94);
  backdrop-filter: blur(10px);
}

.age-gate-modal {
  max-width: 440px;
  width: 100%;
  background: var(--surface);
  border: 1px solid rgba(14, 181, 216, 0.5);
  border-radius: 20px;
  padding: 28px;
  text-align: center;
}

.hidden {
  display: none !important;
}

@media (max-width: 860px) {
  .hero-grid {
    grid-template-columns: 1fr;
  }
}