:root {
  /* Colors */
  --color-bg: #f7f5f2;
  --color-bg-alt: #ece8e2;
  --color-surface: #1c1b1a;
  --color-surface-alt: #282624;
  --color-text: #1c1b1a;
  --color-text-muted: #6b6560;
  --color-text-on-dark: #f2f2f0;
  --color-text-muted-on-dark: #ada79f;
  --color-accent: #ff8c1a;
  --color-accent-hover: #ffa640;
  --color-accent-contrast: #14161a;
  --color-border: #d9d7d1;
  --color-border-dark: #35383e;
  --color-danger: #d64545;

  /* Typography */
  --font-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 1.75rem;
  --font-size-2xl: 2.5rem;
  --line-height-tight: 1.2;

  /* Spacing */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 5rem;

  /* Layout */
  --container-max: 1140px;
  --radius: 8px;
  --shadow: 0 4px 12px rgba(0, 0, 0, 0.35);

  /* Breakpoints (Bootstrap scale; documented for reference, media queries hardcode px values) */
  --bp-sm: 576px;
  --bp-md: 768px;
  --bp-lg: 992px;
  --bp-xl: 1200px;
  --bp-xxl: 1400px;
}