:root {
  --main: 91rem;
  --container: 82rem; /* 1440px max-width */
  --container-padding: 1.25rem;
  --frame-padding: 1.875rem;

  --font-sans: 'Montserrat', sans-serif;
  --font-serif: serif;
  --font-mono: "SFMono-Regular", Consolas, Liberation Mono, Menlo, Courier, monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.15rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.75rem;
  --text-4xl: 2.625rem;
  --text-5xl: 3rem;
  --text-6xl: 4rem;

  --color-primary: #294b69;
  --color-primary-dark: #1e3a52;
  --color-accent: #fcbf3c;
  --color-accent-hover: #e5ac2f;

  --color-black: hsl(0, 0%, 0%);
  --color-white: hsl(0, 0%, 100%);
  --color-gray-100: #e9e9e9;
  --color-gray-200: #d9d9d9;
  --color-gray-300: hsl(0, 0%, 80%);
  --color-gray-400: hsl(0, 0%, 75%);
  --color-gray-500: hsl(0, 0%, 50%);
  --color-gray-600: hsl(0, 0%, 25%);
  --color-gray-700: hsl(0, 0%, 20%);
  --color-gray-800: hsl(0, 0%, 17%);
  --color-gray-900: hsl(0, 0%, 14%);

  --radius-card: 0.9375rem;
  --radius-btn: 0.625rem;

  /* Responsive color tokens — mobile first (dark bg, light text) */
  --color-page-bg: var(--color-primary);
  --color-content-bg: transparent;
  --color-content-text: var(--color-white);
  --color-content-heading: var(--color-white);
  --color-content-link: var(--color-white);
  --color-content-mute: hsl(208, 48%, 71%);
  --color-content-line: hsl(208, 26%, 43%);

  --color-sidebar-bg: var(--color-white);
  --color-sidebar-text: var(--color-primary);
  --color-sidebar-heading: var(--color-primary);

  --color-footer-bg: transparent;
  --color-footer-text: var(--color-white);

  --color-bg-btn: var(--color-gray-700);
  --color-bg-btn-hover: var(--color-gray-600);
  --color-text-btn: var(--color-white);
  --color-bg-toc: var(--color-gray-600);
  --color-text-toc: var(--color-white);
  --color-marker: var(--color-white);
  --color-bg-table-hover: var(--color-gray-100);
}

@media (min-width: 65rem) {
  :root {
    --color-content-bg: var(--color-white);
    --color-content-text: var(--color-primary);
    --color-content-heading: var(--color-primary);
    --color-content-link: var(--color-primary);
    --color-content-mute: var(--color-gray-500);
    --color-content-line: var(--color-gray-200);

    --color-sidebar-bg: var(--color-primary);
    --color-sidebar-text: var(--color-white);
    --color-sidebar-heading: var(--color-white);

    --color-footer-bg: var(--color-white);
    --color-footer-text: var(--color-primary);

    --container-padding: 1.75rem;
  }
}