:root {
  /* Colors */
  --color-bg-base: #fdfbf7;      /* Off-white, warm */
  --color-bg-surface: #f4f0e6;   /* Slightly darker surface */
  --color-bg-inverse: #1a1b18;   /* Deep slate/charcoal */

  --color-text-base: #222320;
  --color-text-muted: #5e615b;
  --color-text-inverse: #fdfbf7;

  --color-accent-primary: #d94b38; /* Rust/Red for strong emphasis (deals) */
  --color-accent-secondary: #3b735f; /* Emerald/Green for savings/money */
  --color-accent-highlight: #ffebb8; /* Warm yellow highlight */

  --color-border: #e3dec9;

  /* Typography */
  --font-family-display: 'Fraunces', serif;
  --font-family-text: 'DM Sans', sans-serif;

  /* Scale (Minor Third) */
  --text-xs: 0.833rem;
  --text-sm: 1rem;
  --text-base: 1.2rem;
  --text-md: 1.44rem;
  --text-lg: 1.728rem;
  --text-xl: 2.074rem;
  --text-2xl: 2.488rem;
  --text-3xl: 2.986rem;
  --text-4xl: 3.583rem;
  --text-5xl: 4.3rem;

  /* Spacing */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 1rem;
  --space-sm: 1.5rem;
  --space-md: 2rem;
  --space-lg: 3rem;
  --space-xl: 4.5rem;
  --space-2xl: 6rem;
  --space-3xl: 9rem;

  /* Layout */
  --container-max: 1200px;
  --container-tight: 800px;

  /* Misc */
  --radius-sm: 4px; /* Minimal border radius, avoiding 'rounded-everything' AI look */
  --radius-md: 8px;
  --transition-base: 0.2s ease-in-out;
}