/* ============================================================
   tokens.css — single source of truth for the design system.
   Load this FIRST on every page (before page styles / site-nav.css).
   Defines all colour, layout and shape tokens for both themes,
   plus global focus and skeleton-loader helpers.
   ============================================================ */

:root,
html[data-theme="dark"] {
  /* Surfaces */
  --bg: #0d1117;
  --surface: #161b22;
  --surface2: #21262d;
  --border: #30363d;

  /* Text */
  --text: #e6edf3;
  --muted: #a1abb7; /* lightened from #8b949e for better contrast */

  /* Accents (semantic) */
  --blue: #58a6ff;
  --green: #3fb950;
  --red: #f85149;
  --amber: #d29922;
  --orange: #d29922; /* alias kept for detail.css */
  --purple: #bc8cff;

  /* Shape */
  --radius: 8px;

  /* Layout */
  --nav-h: 56px;
  --topnav-h: 52px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);

  /* Skeleton shimmer highlight */
  --skeleton-shine: rgba(255, 255, 255, 0.06);
}

html[data-theme="light"] {
  --bg: #f6f8fa;
  --surface: #ffffff;
  --surface2: #eaeef2;
  --border: #d0d7de;

  --text: #1f2328;
  --muted: #57606a;

  --blue: #0969da;
  --green: #1a7f37;
  --red: #cf222e;
  --amber: #9a6700;
  --orange: #9a6700;
  --purple: #8250df;

  --skeleton-shine: rgba(0, 0, 0, 0.05);
}

/* ---- Global accessibility: visible keyboard focus ---- */
:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-radius: 4px;
}
/* Don't show focus ring for mouse users on elements that handle it themselves */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
  outline: none;
}

/* ---- Skeleton loaders ---- */
.skeleton {
  position: relative;
  overflow: hidden;
  background: var(--surface2);
  border-radius: 6px;
}
.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, var(--skeleton-shine), transparent);
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
}
.skeleton-card {
  height: 84px;
  border: 1px solid var(--border);
  border-radius: var(--radius, 8px);
  background: var(--surface);
}
.skeleton-card::after {
  background: linear-gradient(90deg, transparent, var(--skeleton-shine), transparent);
}
.skeleton-line {
  height: 12px;
  border-radius: 4px;
}
@keyframes skeleton-shimmer {
  100% {
    transform: translateX(100%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .skeleton::after,
  .skeleton-card::after {
    animation: none;
  }
}