/* Shared design tokens. Linked before every page stylesheet, so index/dashboard/tip
   all read the same values. widget.js keeps its own palette on purpose - it ships as
   one self-contained file to third-party pages and cannot depend on this. */

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

:root {
  /* Surfaces, GitHub-dark derived */
  --bg: #0d1117;
  --surface: #161b22;
  --surface2: #1c2128;
  --surface3: #21262d;
  --border: #30363d;
  --border-hover: #444c56;

  /* Text */
  --text: #e6edf3;
  --muted: #8b949e;
  --code: #c9d1d9;

  /* Accents */
  --accent: #58a6ff;
  --accent-hover: #79b8ff;
  --accent-bg: #0d2137;
  --green: #3fb950;
  --green-dim: #2ea043;
  --red: #f85149;
  --yellow: #d29922;
  --stripe: #635bff;

  /* Radii */
  --radius-sm: 6px;
  --radius: 8px;
  --radius-lg: 12px;

  /* Type */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: "SFMono-Regular", "Consolas", "Liberation Mono", monospace;

  /* Smallest comfortable hit area. WCAG 2.2 SC 2.5.8 floor is 24px; controls on
     the payment path should reach --tap rather than --tap-min. */
  --tap-min: 24px;
  --tap: 44px;
}

body { background: var(--bg); color: var(--text); font-family: var(--font); }

/* Names, handles and tip messages come from GitHub and from supporters, so they
   can be long and unbroken. Wrap rather than overflow the card. */
h1, h2, h3, p, td, .dev-name, .dev-handle, .tip-msg, .modal-devname, .modal-handle,
.ob-devname, .ob-handle { overflow-wrap: anywhere; }

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

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Close control for any overlay. Padding does the work so the glyph stays small
   while the hit area clears the WCAG minimum. */
.close-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--tap-min); min-height: var(--tap-min);
  padding: 4px; margin: -4px -4px 0 0;
  background: none; border: none; border-radius: var(--radius-sm);
  color: var(--muted); font-size: 1.2rem; line-height: 1; cursor: pointer;
}
.close-btn:hover { color: var(--text); background: var(--surface3); }

/* Loading skeletons */
@keyframes skeleton-pulse { 0%, 100% { opacity: 1 } 50% { opacity: 0.45 } }

.skeleton {
  background: var(--surface2);
  border-radius: var(--radius-sm);
  animation: skeleton-pulse 1.4s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none; }
}