/* Single source for every design value on the site: colors, fonts, scales and component sizes. Quarto pages, page stylesheets and standalone tools read these variables. Sass cannot, so theme-dark.scss mirrors the palette; keep both in sync. The font file is declared in static/fonts/fonts.css. */
:root {
  /* Palette: neutral charcoal, brighter text, blue only for links and the active state */
  --bg-body: #161618;
  --bg-card: #1E1E21;
  --bg-inset: #242428;
  --bg-hover: #2A2A2F;
  --border: #2E2E33;
  --text-primary: #F5F5F7;
  --text-content: #DADADF;
  --text-muted: #A6A6AB;
  --text-dim: #86868B;
  --accent: #2997FF;
  --accent-hover: #5AB1FF;
  --accent-dim: rgba(41, 151, 255, 0.16);
  --accent-line: rgba(41, 151, 255, 0.65);
  --green: #72994E;
  --green-dim: rgba(114, 153, 78, 0.15);
  --orange: #EE6331;
  --orange-dim: rgba(238, 99, 49, 0.12);
  --code-bg: var(--bg-inset);

  /* The green status dot for live data. Not a semantic color, so it stays apart from --green. */
  --live: #30D158;
  --live-dim: rgba(48, 209, 88, 0.16);

  /* RGB triple of --bg-body, for libraries that build their own rgba() values */
  --bg-body-rgb: 22, 22, 24;
  --nav-bg: rgba(var(--bg-body-rgb), 0.8);
  --overlay-bg: rgba(var(--bg-body-rgb), 0.76);

  /* Code syntax colors, each at 4.5:1 or better on --bg-card */
  --code-keyword: #5AB1FF;
  --code-function: #C8AEFF;
  --code-number: #FFB082;
  --code-string: #8ED9A8;
  --code-comment: #8E8E93;

  /* Font stacks. Body text uses the system sans, headings use the serif, code uses the system mono. --font-system is the stack for the standalone tools. */
  --font-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-serif: ui-serif, "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* Type sizes: desktop value at 1200px and wider, phone value at 600px and narrower, interpolated in between. */
  --fs-title: clamp(32px, calc(32px + 8 * (100vw - 600px) / 600), 40px);
  --fs-h2: clamp(22px, calc(22px + 4 * (100vw - 600px) / 600), 26px);
  --fs-h3: clamp(18px, calc(18px + 2 * (100vw - 600px) / 600), 20px);
  --fs-statement: clamp(21px, calc(21px + 5 * (100vw - 600px) / 600), 26px);
  --fs-item: clamp(18px, calc(18px + 1 * (100vw - 600px) / 600), 19px);
  --fs-dek: clamp(18px, calc(18px + 2 * (100vw - 600px) / 600), 20px);
  --fs-article: clamp(17px, calc(17px + 1 * (100vw - 600px) / 600), 18px);
  --fs-role: 17px;
  --fs-ui: 16px;
  --fs-label: clamp(13px, calc(13px + 1 * (100vw - 600px) / 600), 14px);
  --fs-code: 0.875em;
  --fs-pre: clamp(13px, calc(13px + 1.5 * (100vw - 600px) / 600), 14.5px);

  /* Line heights */
  --lh-body: 1.6;
  --lh-article: 1.7;
  --lh-dek: 1.5;
  --lh-heading: 1.25;
  --lh-title: 1.15;

  /* Letter spacing: headings only, labels and body text stay at normal */
  --tracking-heading: -0.01em;

  /* Spacing scale */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;
  --space-88: 88px;

  /* Radii: small controls, buttons, code and figures, panels */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 14px;

  /* Layout and component sizes */
  --container: 1184px;
  --gutter: clamp(20px, calc(20px + 28 * (100vw - 600px) / 600), 48px);
  --nav-height: 56px;
  --touch-target: 44px;
  --btn-padding: 12px 18px;
  --avatar-size: clamp(56px, calc(56px + 16 * (100vw - 600px) / 600), 72px);

  /* Aliases kept for the tools and older rules */
  --bg-primary: var(--bg-body);
  --bg-secondary: var(--bg-card);
  --bg-tertiary: var(--bg-inset);
  --text-secondary: var(--text-content);
  --border-color: var(--border);
}