:root {
  --brand-dark: #0f172a;     /* slate-900 */
  --brand-darker: #0b1220;
  --brand-accent: #22c55e;   /* green-500 */
  --text-main: #111827;      /* gray-900 */
  --text-muted: #6b7280;     /* gray-500 */
  --card-border: #e5e7eb;    /* gray-200 */
  --card-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
}

html {
  min-height: 100%;
}

body {
  min-height: 100%;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto,
    Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color: var(--text-main);
  background: #f7f8fb;
}

/* Hero */
.hero {
  background:
    radial-gradient(1200px 300px at -10% -100%, rgba(34,197,94,0.25), transparent 60%),
    radial-gradient(800px 200px at 120% -80%, rgba(59,130,246,0.18), transparent 60%),
    linear-gradient(180deg, var(--brand-dark), var(--brand-darker));
  color: #fff;
}
.hero h1 {
  letter-spacing: -0.02em;
}

/* Cards */
.article-card {
  border: 1px solid var(--card-border);
  border-radius: 14px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.article-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--card-shadow);
  border-color: rgba(0,0,0,0.06);
}
.article-link {
  color: inherit;
}
.article-link:hover {
  color: #1d4ed8; /* tailwind blue-700 */
}

/* Line clamps for previews */
.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Sport badges */
.sport-badge {
  text-transform: capitalize;
  border-radius: 999px;
  padding: .375rem .6rem;
  font-weight: 600;
}
.sport-badge.basketball { background: #f97316; color: #fff; }
.sport-badge.tennis { background: #84cc16; color: #0f172a; }
.sport-badge.f1 { background: #ef4444; color: #fff; }

/* Navbar gradient */
.navbar-indigo {
  background: linear-gradient(180deg, var(--brand-dark), var(--brand-darker));
  color: #fff;
}