/* NeedForEase site styles — tokens pulled directly from the Android app's
   theme system (core/theme/AppTheme.kt, NeonAccent.kt, NeonGlow.kt,
   StatGaugeView.kt, Spacing.kt, Typography.kt). See website/README.md for
   the mapping notes. */

@font-face {
  font-family: "Racing Sans One";
  src: url("fonts/RacingSansOne-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Core palette — dark theme, default NeonAccent.GREEN (#39FF14) */
  --bg: #000000;
  --bg-card: #0a0a0a;
  --accent: #39ff14;
  --accent-rgb: 57, 255, 20;
  --danger: #ff3b30;
  --warning: #ff9500;

  /* Readable body-text green (policy pages) — the app itself uses the
     accent color for ALL text in dark mode, which reads great in short HUD
     labels but gets tiring across paragraphs of policy text. These two
     pages keep the same black+green identity but swap long-form body copy
     to a soft off-white so it's comfortable to actually read. */
  --ink: #eef1e8;
  --ink-dim: #a9b0a3;

  --radius-card: 14px;
  --radius-button: 12px;
  --radius-pill: 999px;
  --stroke: 1.5px;

  --space-xxs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-xxl: 48px;

  --font-wordmark: "Racing Sans One", cursive;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--accent);
  font-family: var(--font-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--accent);
}

img,
svg {
  max-width: 100%;
  display: block;
}

/* ---------- Shared chrome ---------- */

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.25);
  flex-wrap: wrap;
}

.wordmark {
  font-family: var(--font-wordmark);
  font-size: clamp(22px, 5vw, 28px);
  color: var(--accent);
  text-decoration: none;
  text-shadow: 0 0 10px rgba(var(--accent-rgb), 0.75);
  letter-spacing: 0.5px;
}

.site-nav {
  display: flex;
  gap: var(--space-lg);
  flex-wrap: wrap;
}

.site-nav a {
  color: var(--ink-dim);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.3px;
  transition: color 0.15s ease;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
  color: var(--accent);
}

.site-footer {
  padding: var(--space-xl) var(--space-lg) var(--space-xxl);
  border-top: 1px solid rgba(var(--accent-rgb), 0.2);
  color: var(--ink-dim);
  font-size: 13px;
  text-align: center;
}

.site-footer a {
  color: var(--ink-dim);
}

.site-footer a:hover {
  color: var(--accent);
}

.site-footer .legal-links {
  margin-bottom: var(--space-sm);
  display: flex;
  gap: var(--space-md);
  justify-content: center;
  flex-wrap: wrap;
}

/* ---------- Glow utilities (see NeonGlow.kt) ---------- */

.glow-border {
  border: var(--stroke) solid var(--accent);
  border-radius: var(--radius-card);
  box-shadow: 0 0 0 9px rgba(var(--accent-rgb), 0.1),
    0 0 0 6px rgba(var(--accent-rgb), 0.18),
    0 0 0 3.75px rgba(var(--accent-rgb), 0.35);
}

.glow-text {
  text-shadow: 0 0 10px rgba(var(--accent-rgb), 0.75);
}

.neon-divider {
  height: 2px;
  margin: var(--space-lg) 0;
  background: var(--accent);
  box-shadow: 0 0 6px 3px rgba(var(--accent-rgb), 0.16),
    0 0 12px 6px rgba(var(--accent-rgb), 0.08);
  border: none;
}

/* ---------- Buttons (see PrimaryButton.kt / ProEntryButton.kt) ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: 14px 28px;
  border-radius: var(--radius-button);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  border: none;
}

.btn-primary {
  background: var(--accent);
  color: #000;
  box-shadow: 0 0 18px 2px rgba(var(--accent-rgb), 0.55);
}

.btn-primary:hover {
  box-shadow: 0 0 26px 4px rgba(var(--accent-rgb), 0.75);
}

.btn-outline {
  background: transparent;
  color: var(--accent);
  border-radius: var(--radius-pill);
  padding: 12px 26px;
  border: var(--stroke) solid var(--accent);
  box-shadow: 0 0 0 6px rgba(var(--accent-rgb), 0.12),
    0 0 0 3px rgba(var(--accent-rgb), 0.22);
}

/* ---------- Landing page (full gamified HUD look) ---------- */

.hero {
  padding: var(--space-xxl) var(--space-lg);
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}

.hero h1 {
  font-family: var(--font-wordmark);
  font-size: clamp(40px, 10vw, 64px);
  margin: 0 0 var(--space-md);
  text-shadow: 0 0 10px rgba(var(--accent-rgb), 0.75);
  line-height: 1.05;
}

.hero p.tagline {
  color: var(--ink);
  font-size: clamp(16px, 3.4vw, 20px);
  max-width: 520px;
  margin: 0 auto var(--space-xl);
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-lg);
  max-width: 960px;
  margin: var(--space-xxl) auto;
  padding: 0 var(--space-lg);
}

.feature-card {
  background: var(--bg-card);
  border-radius: var(--radius-card);
  padding: var(--space-lg);
  text-align: left;
}

.feature-card .icon {
  width: 40px;
  height: 40px;
  margin-bottom: var(--space-sm);
  color: var(--accent);
}

.feature-card h3 {
  margin: 0 0 var(--space-xs);
  font-size: 18px;
  color: var(--accent);
}

.feature-card p {
  margin: 0;
  color: var(--ink-dim);
  font-size: 14px;
  line-height: 1.6;
}

.cta-row {
  display: flex;
  gap: var(--space-md);
  justify-content: center;
  flex-wrap: wrap;
  margin-top: var(--space-xl);
}

.gauge-strip {
  display: flex;
  justify-content: center;
  gap: var(--space-xl);
  flex-wrap: wrap;
  margin: var(--space-xxl) auto;
}

.gauge {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  border: 3px solid rgba(var(--accent-rgb), 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.gauge svg {
  position: absolute;
  inset: -3px;
}

.gauge span.pct {
  font-weight: 700;
  font-size: 18px;
  color: var(--accent);
}

.gauge-label {
  text-align: center;
  font-size: 13px;
  color: var(--ink-dim);
  margin-top: var(--space-xs);
}

/* ---------- Policy pages (calmer, readable variant) ---------- */

.policy-wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--space-xl) var(--space-lg) var(--space-xxl);
}

.policy-hero {
  margin-bottom: var(--space-xl);
}

.policy-hero h1 {
  font-family: var(--font-wordmark);
  font-size: clamp(30px, 6vw, 42px);
  margin: 0 0 var(--space-xs);
  text-shadow: 0 0 8px rgba(var(--accent-rgb), 0.55);
}

.policy-hero .updated {
  color: var(--ink-dim);
  font-size: 14px;
}

.policy-card {
  background: var(--bg-card);
  border: 1px solid rgba(var(--accent-rgb), 0.25);
  border-radius: var(--radius-card);
  padding: var(--space-lg);
  margin-bottom: var(--space-lg);
}

.policy-card h2 {
  color: var(--accent);
  font-size: 20px;
  margin: 0 0 var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.2);
}

.policy-card h3 {
  color: var(--accent);
  font-size: 16px;
  margin: var(--space-lg) 0 var(--space-xs);
}

.policy-card p,
.policy-card li {
  color: var(--ink);
  font-size: 15.5px;
  line-height: 1.7;
}

.policy-card ul,
.policy-card ol {
  padding-left: 22px;
  margin: var(--space-sm) 0;
}

.policy-card li {
  margin-bottom: var(--space-xs);
}

.policy-card strong {
  color: #ffffff;
}

.policy-card a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-sm) 0 var(--space-md);
  font-size: 14px;
}

.data-table th,
.data-table td {
  text-align: left;
  padding: var(--space-sm);
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.15);
  color: var(--ink);
  vertical-align: top;
}

.data-table th {
  color: var(--accent);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.callout {
  border-left: 3px solid var(--accent);
  background: rgba(var(--accent-rgb), 0.06);
  padding: var(--space-md);
  border-radius: 0 8px 8px 0;
  margin: var(--space-md) 0;
}

.callout p {
  margin: 0;
  color: var(--ink);
  font-size: 14.5px;
}

.step-list {
  counter-reset: step;
  list-style: none;
  padding-left: 0;
}

.step-list li {
  counter-increment: step;
  position: relative;
  padding-left: 40px;
  margin-bottom: var(--space-md);
}

.step-list li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: var(--stroke) solid var(--accent);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.15);
}

/* ---------- Responsive ---------- */

@media (max-width: 480px) {
  .site-header {
    padding: var(--space-sm) var(--space-md);
  }
  .policy-wrap,
  .hero {
    padding-left: var(--space-md);
    padding-right: var(--space-md);
  }
  .policy-card {
    padding: var(--space-md);
  }
}