/* ==========================================================================
   tokens.css — global design tokens (load first)
   ========================================================================== */

:root {
  /* --- Core palette (editorial finance blog) --- */
  --color-bg: #ffffff;
  --color-surface: #f2f6fb;
  --color-surface-muted: #e6eef7;
  --color-text: #18222e;
  --color-text-muted: #57626f;
  --color-border: #d3deea;
  --color-accent: #1473c4;
  --color-accent-hover: #0f5797;
  --color-link: #1366b3;
  --color-accent-soft: #2ea6e0;
  --color-dark-surface: #112a45;

  /* --- Header / footer chrome (dark navy) --- */
  --color-header-bg: #112a45;
  --color-header-text: #f2f6fb;
  --color-header-text-muted: #a3b4c6;
  --color-header-border: rgba(255, 255, 255, 0.12);
  --color-header-hover: rgba(255, 255, 255, 0.08);

  --color-footer-bg: #0d1f33;
  --color-footer-text: #f2f6fb;
  --color-footer-text-muted: #8fa3b8;
  --color-footer-border: rgba(255, 255, 255, 0.1);

  /* --- Layout widths --- */
  --container-wide: 1180px;
  --container-article: 720px;
  --sidebar-width: 286px;

  /* --- Radii & elevation --- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --shadow-soft: 0 8px 28px rgba(0, 0, 0, 0.06);

  /* --- Typography stacks --- */
  --font-heading: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-body: "Libre Franklin", "Inter", Arial, Helvetica, sans-serif;

  /* --- Sticky offsets (header + sidebar) --- */
  --header-height: 64px;
  --sidebar-offset-top: 32px;
  --sidebar-sticky-top: calc(var(--header-height) + var(--sidebar-offset-top));
}