/* WagerMate v2 — base styles. Mobile-first. Design tokens v3_3 (M6.2). */

:root {
  --page: #12161D;
  --page-deep: #0C1016;
  --card: #1B2029;
  --border: rgba(255, 255, 255, 0.07);
  --ink: #E7EBF0;
  --ink-2: #97A1AE;
  --ink-3: #67727F; /* 3.70:1 on --page — large text or decoration only, never body text */
  --copper: #CE8B57;
  --copper-hi: #E2A876;
  --copper-ink: #23150A; /* text on copper-solid surfaces — 6.30:1 on --copper */
  --good: #4CBF7A;
  --bad: #D96A5E;
  --haze: #C9D3DF;
  --slate: #5A7291;
  --mist: #EDF1F4;
  --harbor: #1C2836;
  --piece-black: #223349;
  --sq-lastmove: rgba(206, 139, 87, 0.28); /* --copper at .28 */
  --sq-target: rgba(201, 211, 223, 0.25); /* --haze at .25 */
  --r-cta: 3px;
  --r-card: 6px;
  --r-inset: 4px;
  --r-pill: 999px;
  --serif: "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
}

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

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

body {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  background: radial-gradient(ellipse 1100px 600px at 50% -8%, rgba(74, 96, 124, 0.16), transparent 60%) var(--page);
  color: var(--ink);
  line-height: 1.5;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

h1 { font-family: var(--serif); letter-spacing: -0.02em; }

/* Card headings share one scale across leaderboard, challenges, and any
   future pre-game cards. */
h2 { font-family: var(--serif); font-size: 1.05rem; font-weight: 600; }

a { color: var(--copper); text-decoration: none; }
a:hover { color: var(--copper-hi); }

/* Keyboard focus: one visible ring everywhere. Inputs keep their own
   focus style (see the auth form rules). */
button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--copper);
  outline-offset: 2px;
}

/* Default button = copper ghost (secondary actions). Primary CTAs go
   copper-solid via their ID rules in index.html. */
button {
  font-family: inherit;
  font-size: 1rem;
  padding: 12px 24px;
  border: 1px solid rgba(206, 139, 87, 0.5);
  border-radius: var(--r-cta);
  background: transparent;
  color: var(--copper); /* 6.44:1 on --page, 5.80:1 on --card — AA */
  font-weight: 600;
  cursor: pointer;
  min-height: 44px;
}
button:hover { background: rgba(206, 139, 87, 0.08); border-color: var(--copper); }
button:disabled { opacity: 0.5; cursor: not-allowed; }

@media (min-width: 768px) {
  body { font-size: 1.0625rem; }
}