@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap');

/* ---------- Theme tokens ---------- */
/* Light = default */
:root {
  --bg: #ffffff;
  --text: #111827;      /* slate-900 */
  --muted: #6b7280;     /* slate-500 */
  --link: #0b57d0;

  --card: #ffffff;
  --card-border: #e5e7eb;   /* slate-200 */

  --chip-bg: #ffffff;
  --chip-border: #e5e7eb;

  --footer-bg: #f8fafc;
  --footer-text: #4b5563;
}

/* Dark overrides */
:root[data-theme="dark"] {
  --bg: #0b0f14;
  --text: #e5eef8;
  --muted: #9aa7b8;
  --link: #8bb4ff;

  --card: #141a22;         /* panel */
  --card-border: #273244;  /* panel border */

  --chip-bg: #0f141b;
  --chip-border: #243146;

  --footer-bg: #0d1218;
  --footer-text: #9aa7b8;
}

/* ---------- Base usage of tokens ---------- */
html, body {
  background: var(--bg);
  color: var(--text);
}

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

/* Typical “card” + borders should use the tokens */
.card {
  background: var(--card);
  border-color: var(--card-border);
  color: var(--text);
}

/* Chips, pager, etc. also use tokens (site.css can rely on these) */
.chip {
  background: var(--chip-bg);
  border-color: var(--chip-border);
  color: var(--text);
}
.pager a, .pager span {
  background: var(--card);
  border-color: var(--card-border);
  color: var(--text);
}

/* Footer (if used) */
.site-footer {
  background: var(--footer-bg);
  color: var(--footer-text);
}