/* Ndema — shared base
   Brand tokens, reset, fonts, brand mark, and buttons used by every page.
   Page-specific theme + layout live in each page's own stylesheet/block. */

@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@500;600;700;800;900&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap');

:root {
  /* Brand green */
  --leaf:     #00b27a;
  --leaf-d:   #007a53;
  --leaf-l:   #7be0bd;
  /* Deep green (dark surfaces) */
  --forest:   #06231a;
  --forest-2: #0a3427;
  /* Accent reserved for points/what-you-earn */
  --gold:     #f5c542;
  /* Type */
  --display:  'Unbounded', sans-serif;
  --text:     'Inter', system-ui, sans-serif;
  --mono:     'IBM Plex Mono', monospace;
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Brand mark */
.brand { display: flex; align-items: center; gap: 11px; }
.brand-mark {
  display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 11px;
  background: var(--leaf); color: var(--forest);
  font-family: var(--display); font-weight: 900; font-size: 1.25rem;
}
.brand-name { font-family: var(--display); font-weight: 700; font-size: 1.2rem; letter-spacing: 0.01em; }

/* Buttons (appear on dark surfaces across all pages) */
.btn {
  display: inline-flex; align-items: center;
  min-height: 52px; padding: 0 30px; border-radius: 999px;
  font-weight: 700; font-size: 1rem; text-decoration: none; cursor: pointer;
  transition: background-color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.btn-solid { background: var(--leaf); color: var(--forest); box-shadow: 0 10px 34px rgba(0, 178, 122, 0.32); }
.btn-solid:hover { background: #00c98a; box-shadow: 0 14px 42px rgba(0, 178, 122, 0.5); }
.btn-ghost { color: #eefaf4; border: 1px solid rgba(123, 224, 189, 0.28); }
.btn-ghost:hover { border-color: var(--leaf-l); background: rgba(0, 178, 122, 0.1); }
.btn:focus-visible { outline: 3px solid var(--leaf-l); outline-offset: 3px; }