/* AIPIP design tokens — shared across all aipip.art pages.
 *
 * Palette: GitHub Dark (already used by all existing pages).
 * Page-specific styles stay inline in each .html file; this file
 * exposes the tokens as CSS custom properties so the design stays
 * consistent and any future redesign is one file away.
 *
 * Usage in HTML:
 *   <link rel="stylesheet" href="/css/tokens.css">
 *   ... then in inline <style>:
 *   body { background: var(--bg); color: var(--text-body); }
 */

:root {
  /* Backgrounds */
  --bg: #0d1117;            /* page */
  --bg-card: #161b22;       /* cards, panels */
  --bg-elev: #21262d;       /* elevated surfaces, borders */

  /* Text */
  --text-strong: #f0f6fc;   /* headlines */
  --text-body: #c9d1d9;     /* body */
  --text-muted: #8b949e;    /* secondary */
  --text-dim: #484f58;      /* tertiary */
  --text-faint: #30363d;    /* near-invisible */

  /* Accents */
  --accent-blue: #58a6ff;   /* links, primary action */
  --accent-yellow: #d29922; /* warning, taglines */
  --accent-red: #f85149;    /* error, "PIP'd" */
  --accent-green: #3fb950;  /* success */

  /* Translucent variants for badges */
  --tint-blue: #58a6ff22;
  --tint-yellow: #d2992222;
  --tint-red: #f8514922;
  --tint-green: #23882222;

  /* Borders */
  --border: #21262d;

  /* Typography */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Radii */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
}

/* Universal reset — kept minimal so per-page styles stay in charge. */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text-body);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent-blue); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; display: block; }