* { box-sizing: border-box; }

:root {
  --bg: #0a0a0a;
  --text: #eaeaea;

  /* pixel-art accent font (keycaps, small labels) */
  --pixel-font: "Press Start 2P", monospace;
  /* faint CRT scanline overlay tint for glass panels */
  --scanline: rgba(255,255,255,0.035);
  /* pixel accent color for focus rings / keycap edges */
  --pixel-accent: #6be0d0;

  --glass-bg: rgba(20,20,20,0.4);
  --glass-border: rgba(255,255,255,0.08);
  --glass-highlight: rgba(255,255,255,0.1);

  --card-bg: linear-gradient(
    145deg,
    rgba(255,255,255,0.06),
    rgba(255,255,255,0.02)
  );
  --card-border: rgba(255,255,255,0.08);
  --card-hover-bg: linear-gradient(
    145deg,
    rgba(255,255,255,0.6),
    rgba(255,255,255,0.25)
  );
  --card-hover-text: #111;

  --code-bg: linear-gradient(
    145deg,
    rgba(20,20,20,0.8),
    rgba(20,20,20,0.6)
  );
  --code-border: rgba(255,255,255,0.08);

  --inline-code-bg: rgba(255,255,255,0.08);

  --table-head: rgba(255,255,255,0.06);
  --table-row: rgba(255,255,255,0.02);

  --link-hover-underline: #fff;

  --copy-btn-bg: rgba(255,255,255,0.06);
  --copy-btn-border: rgba(255,255,255,0.1);
  --copy-btn-hover: rgba(255,255,255,0.12);

  --shadow-strong: rgba(0,0,0,0.5);
  --shadow-soft: rgba(0,0,0,0.2);

  --callout-warning-border: #e3b341;
  --callout-warning-bg: rgba(227,179,65,0.08);

  --callout-info-border: #58a6ff;
  --callout-info-bg: rgba(88,166,255,0.08);

  --callout-important-border: #a371f7;
  --callout-important-bg: rgba(163,113,247,0.08);

  --callout-note-border: #8b949e;
  --callout-note-bg: rgba(139,148,158,0.08);

  --callout-caution-border: #ff7b72;
  --callout-caution-bg: rgba(255,123,114,0.08);

  --syntax-kw: #7aa2f7;
  --syntax-str: #9ece6a;
  --syntax-com: #6b7280;
  --syntax-num: #f78c6c;
  --syntax-fn: #82aaff;

  --table-hover: rgba(255,255,255,0.04);

  --scrollbar-thumb: rgba(160, 235, 222, 0.30);
  --scrollbar-thumb-hover: rgba(160, 235, 222, 0.55);
}

body.light {
  --bg: #f5f5f5;
  --text: #111;

  --scanline: rgba(0,0,0,0.04);
  --pixel-accent: #0b7d70;

  --glass-bg: rgba(255,255,255,0.55);
  --glass-border: rgba(0,0,0,0.08);
  --glass-highlight: rgba(255,255,255,0.6);

  --card-bg: linear-gradient(
    145deg,
    rgba(255,255,255,0.9),
    rgba(240,240,240,0.6)
  );
  --card-border: rgba(0,0,0,0.08);
  --card-hover-bg: linear-gradient(
    145deg,
    rgba(0,0,0,0.5),
    rgba(0,0,0,0.2)
  );
  --card-hover-text: #f5f5f5;

  --code-bg: linear-gradient(
    145deg,
    rgba(255,255,255,0.95),
    rgba(240,240,240,0.85)
  );
  --code-border: rgba(0,0,0,0.08);

  --inline-code-bg: rgba(0,0,0,0.05);

  --table-head: rgba(0,0,0,0.05);
  --table-row: rgba(0,0,0,0.02);

  --link-hover-underline: #000;

  --copy-btn-bg: rgba(0,0,0,0.06);
  --copy-btn-border: rgba(0,0,0,0.12);
  --copy-btn-hover: rgba(0,0,0,0.08);

  --shadow-strong: rgba(0,0,0,0.2);
  --shadow-soft: rgba(0,0,0,0.08);

  --callout-warning-bg: rgba(227,179,65,0.12);
  --callout-info-bg: rgba(88,166,255,0.12);
  --callout-caution-bg: rgba(255,123,114,0.12);
  --callout-important-bg: rgba(163,113,247,0.12);
  --callout-note-bg: rgba(139,148,158,0.12);

  --syntax-kw: #005cc5;
  --syntax-str: #22863a;
  --syntax-com: #9ca3af;
  --syntax-num: #d73a49;
  --syntax-fn: #6f42c1;

  --table-hover: rgba(0,0,0,0.04);

  --scrollbar-thumb: rgba(11, 125, 112, 0.35);
  --scrollbar-thumb-hover: rgba(11, 125, 112, 0.6);
}

html, body {
  margin: 0;
  font-family: "Gabarito", system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  height: 100%;
  width: 100%;
  min-width: 100vw;
  overflow-x: hidden;
}

/* hide UI */
body.canvas-mode .content,
body.canvas-mode .footer {
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
}

.content,
.footer {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

a {
  color: inherit;
  text-decoration: none;
}

/* =========================================================
   Scrollbar — slim, visible, inset so it doesn't protrude.
   Themed via --scrollbar-thumb (recolors with light/dark).
========================================================= */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) transparent;
}

::-webkit-scrollbar {
  width: 11px;
  height: 11px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  /* 3px transparent border + padding-box clip keeps the visible thumb slim */
  background: var(--scrollbar-thumb);
  background-clip: padding-box;
  border: 3px solid transparent;
  border-radius: 999px;
  transition: background 0.2s ease;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
  background-clip: padding-box;
}