/* ==========================================================================
   VATT LABS - SHARED DESIGN TOKENS
   Loaded by every page before its own stylesheet. Holds only what is genuinely
   shared across properties: the brand accent, text/surface tones, type stacks,
   status colours and the social palette. Each product still styles itself; it
   just reaches for these instead of restating hex codes.
   ========================================================================== */

:root {
  /* Brand accent (emerald) */
  --vl-accent: #10b981;
  --vl-accent-hover: #059669;
  --vl-accent-subtle: rgba(16, 185, 129, 0.12);

  /* Surfaces */
  --vl-bg: #0a0a0a;
  --vl-surface: #111111;
  --vl-border: #333333;

  /* Text */
  --vl-text-bright: #ffffff;
  --vl-text: #e0e0e0;
  --vl-text-dim: #888888;

  /* Type */
  --vl-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --vl-font-mono: 'SF Mono', 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, 'Courier New', monospace;

  /* Project status */
  --vl-status-live: #00ff9d;
  --vl-status-beta: #ffb800;
  --vl-status-alpha: #ffa726;
  --vl-status-archived: #555555;

  /* Social brand colours, used for hover states */
  --vl-youtube: #ff0000;
  --vl-twitch: #9146ff;
  --vl-github: #f97316;
  --vl-x: #00d9ff;
  --vl-patreon: #ff424d;
}

/* --------------------------------------------------------------------------
   Social links
   The shared _partials/social-links.html carries the .social-links class on
   every page, so these hover colours are defined once here. Size, gap and
   spacing stay with each page's own stylesheet.
   -------------------------------------------------------------------------- */

.social-links a[href*="youtube"]:hover { color: var(--vl-youtube); }
.social-links a[href*="twitch"]:hover { color: var(--vl-twitch); }
.social-links a[href*="github"]:hover { color: var(--vl-github); }
.social-links a[href*="x.com"]:hover,
.social-links a[href*="twitter"]:hover { color: var(--vl-x); }
.social-links a[href*="patreon"]:hover { color: var(--vl-patreon); }