/*
 * base.css - single source of truth for the design-system tokens.
 *
 * Loaded globally by fragments/head.html BEFORE nav.css and the per-page stylesheet, so every page
 * that uses the head fragment inherits these tokens. Page stylesheets may still declare additional,
 * page-specific tokens (e.g. --gold, --tier1, --live) in their own :root block.
 *
 * NOT loaded by standalone surfaces, which keep their own :root token block:
 *   - OBS overlay widgets (static/widget-*.css, served via static/widget-*.html / overlay.html)
 *   - the operator console (operator.css)
 *   - the error pages (error-404.css / error-500.css)
 */
:root {
  /* Core palette */
  --bg: #0e0e10;
  --text: #efeff1;
  --accent: #9146ff;
  --accent-text: #a970ff;
  --muted: #adadb8;
  --card: #18181b;
  --border: #26262c;
  --danger: #e53935;
  --green: #43b581;

  /* Shared semantic/accent colors (previously duplicated across page stylesheets). */
  --red: #e53935;     /* alias of --danger; some pages reference --red */
  --gold: #f5a623;    /* 1st-place / featured accent (leaderboard, redemptions, sub tiers) */
  --silver: #c0c0c0;  /* 2nd-place medal */
  --bronze: #cd7f32;  /* 3rd-place medal */
  --tier1: #9146ff;   /* sub tier 1 badge */
  --tier2: #00aeef;   /* sub tier 2 badge */
  --tier3: #f5a623;   /* sub tier 3 badge */
}

/* ── Accessibility helpers ── */

/* Visually hidden but available to screen readers (for labels on icon-only controls, etc.). */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Skip-to-content link: off-screen until focused, then visible at the top-left. */
.skip-link {
  position: fixed; top: 8px; left: 8px; z-index: 1000;
  background: var(--accent); color: #fff; padding: 8px 14px; border-radius: 6px;
  font-size: 0.875rem; font-weight: 600; text-decoration: none;
  transform: translateY(-150%); transition: transform 0.15s;
}
.skip-link:focus { transform: translateY(0); outline: 2px solid #fff; outline-offset: 2px; }

/* Consistent keyboard-focus ring for links/buttons/custom-focusable elements (mouse focus is
   unaffected; inputs keep their own accent-border focus style from their page stylesheet). */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--accent-text); outline-offset: 2px;
}

/* ── Buttons ── */
/* Shared button base + the common `primary` and `sm` modifiers (identical across the dashboard and
   overlay pages). Pages may still add their own modifiers (e.g. .btn-danger, .btn-ghost), and the
   marketing home page intentionally overrides .btn-primary with larger hero-CTA styling. */
.btn { border: none; border-radius: 6px; cursor: pointer; font-size: 0.82rem; font-weight: 600; padding: 8px 14px; transition: opacity .15s; }
.btn:hover { opacity: .85; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-sm { padding: 5px 10px; font-size: 0.75rem; }

/* ── Loading skeletons ── */
/* Reusable shimmer placeholder. Uses translucent-white overlays so it works on any dark surface.
   Apply `.skeleton` to a sized element; pages add their own size/shape classes alongside it. */
.skeleton {
  background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.11) 37%, rgba(255,255,255,0.04) 63%);
  background-size: 400% 100%;
  animation: skeleton-loading 1.4s ease infinite;
  border-radius: 4px;
}
@keyframes skeleton-loading {
  0%   { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } }