:root {
  /* Base Colors */
  --scrollPrimaryRgb: 17, 17, 17;
  --scrollSurfaceRgb: 204, 204, 204;
  --scrollTextBase: 17, 17, 17;
  --scrollLinkBase: 17, 17, 17;

  /* Semantic Colors */
  --scrollColorBackground: #fffff8;
  --scrollColorText: #111;
  --scrollColorLink: inherit;
  --scrollColorSubdued: rgb(102, 102, 102);

  /* Typography */
  --scrollFontPrimary: Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif;
  --scrollFontUi: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --scrollFontMono: Consolas, "Liberation Mono", Menlo, Courier, monospace;
  --scrollBaseFontSize: 15px;
  --scrollLineHeight: 2;

  /* Typography Scale */
  --scrollH1Size: 3.2rem;
  --scrollH2Size: 2.2rem;
  --scrollH3Size: 1.7rem;
  --scrollCodeSize: 1rem;

  /* Layout */
  --scrollMaxWidth: 1400px;
  --scrollBodyPadding: 12.5%;

  /* Dark Mode Override */
  @media (prefers-color-scheme: dark) {
    --scrollColorBackground: #151515;
    --scrollColorText: #ddd;
  }
}