:root {
  --font-sans: Rubik, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-sans-tracking: -0.012em;
  --font-blog-tracking: -0.028em;
  --font-blog-heading-tracking: -0.042em;
  --bs-font-sans-serif: var(--font-sans);
  --bs-body-font-family: var(--font-sans);
  --bs-font-monospace: var(--font-mono);
  --radius: 12px;
  --radius-sm: 8px;
  --shadow-drop: 0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -2px 6px rgba(0, 0, 0, 0.25);
  /* Legacy CMS–inspired gloss (blue default, gold hover) */
  --gloss-primary: linear-gradient(180deg, #3d7fc4 0%, #2989d8 46%, #207cca 52%, #5a9fd4 100%);
  --gloss-primary-hover: linear-gradient(180deg, #fff8e0 0%, #f3c355 55%, #e8a820 100%);
  --gloss-primary-border: #1a4f8a;
  --gloss-primary-border-hover: #aa8800;
  --gloss-danger: linear-gradient(180deg, #f85032 0%, #f16f5c 46%, #f6290c 52%, #e73827 100%);
  --gloss-danger-hover: linear-gradient(180deg, #ff7a62 0%, #f85032 46%, #d6280c 52%, #f16f5c 100%);
  --gloss-danger-border: #8a1a0a;
  --gloss-danger-border-hover: #c41e08;
  --gloss-secondary: linear-gradient(180deg, #6d7d96 0%, #4a5568 46%, #2f3848 52%, #5a6a82 100%);
  --gloss-secondary-hover: linear-gradient(180deg, #7e8ea8 0%, #5a6a82 46%, #3a4558 52%, #6d7d96 100%);
  --gloss-secondary-border: #2a3344;
  --gloss-secondary-border-hover: #4a5568;
  --gloss-chrome: linear-gradient(180deg, #5a6a82 0%, #3a4558 48%, #2a3344 100%);
  --gloss-chrome-hover: linear-gradient(180deg, #6a7a92 0%, #4a5568 48%, #343f52 100%);
  --shadow-button-drop: 2px 2px 6px rgba(0, 0, 0, 0.55), 0 6px 18px rgba(0, 0, 0, 0.35);
  --shadow-button-inset: inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -3px 8px rgba(0, 0, 0, 0.28);
  --shadow-button-hover-glow: 0 0 14px rgba(255, 210, 80, 0.55);
  /* Back-compat aliases */
  --gloss-bg: var(--gloss-chrome);
  --gloss-bg-hover: var(--gloss-chrome-hover);
  --text: #e8eef8;
  --muted: #a8b4c8;
  --accent: #89b4ff;
  --page-bg: #101010;
  /* Halo + drop so light type stays readable on the striped --page-bg */
  --text-shadow-on-page-bg:
    0 1px 0 rgba(0, 0, 0, 1),
    0 2px 6px rgba(0, 0, 0, 0.95),
    0 0 10px rgba(0, 0, 0, 0.9),
    0 0 22px rgba(0, 0, 0, 0.65);
  --panel-bg: linear-gradient(165deg, rgba(83, 83, 83, 0.95), rgba(34, 34, 34, 0.98));
  --header-bg: rgba(30, 38, 54, 0.72);
  --site-max-width: 1100px;
  --site-gutter: 1.25rem;
  color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}