:root {
  /* ── Color System ── */
  --color-ivory: #F8F7F3;
  --color-warm-beige: #F2F0EB;
  --color-charcoal: #1E1E1E;
  --color-slate-gray: #3A3A3A;
  --color-text-light: #5A5A5A;
  --color-border: #E0DDD8;
  --color-herbal-green: #2D5E40;
  --color-herbal-green-light: #3A7A52;
  --color-herbal-green-dark: #1E4530;
  --color-brass: #87631D; /* Adjusted from #C49A3C for WCAG AA 4.5:1 contrast */
  --color-raw-umber: #1A3728;
  --color-warm-linen: #EDE9E2;

  /* ── Semantic aliases (used throughout existing HTML/CSS) ── */
  --color-bg: var(--color-ivory);
  --color-surface: var(--color-warm-beige);
  --color-surface-2: var(--color-warm-linen);
  --color-surface-offset: var(--color-border);
  --color-text: var(--color-charcoal);
  --color-text-muted: var(--color-slate-gray);
  --color-text-faint: var(--color-text-light);
  --color-primary: var(--color-herbal-green);
  --color-primary-hover: var(--color-herbal-green-light);
  --color-primary-active: var(--color-herbal-green-dark);
  --color-accent: var(--color-brass);
  --color-accent-hover: #a8832f;
  --color-dark-section: var(--color-raw-umber);
  --color-dark-section-text: #F0E8DC;
  --color-white: #FFFFFF;
  --color-coconut-cream: var(--color-warm-linen);

  /* ── Typography ── */
  --font-display: 'DM Serif Display', Georgia, serif;
  --font-body: 'DM Sans', 'Helvetica Neue', sans-serif;
  /* Backward-compat alias used in existing CSS */
  --font-heading: var(--font-display);

  /* ── Spacing ── */
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 2rem;
  --spacing-lg: 4rem;
  --spacing-xl: 8rem;

  /* ── Radii ── */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  /* ── Shadows ── */
  --shadow-subtle:   0 4px 20px rgba(26, 55, 40, 0.08);
  --shadow-hover:    0 8px 32px rgba(26, 55, 40, 0.13);
  --shadow-elevation:0 4px 16px rgba(26, 55, 40, 0.07);

  /* ── Transitions ── */
  --transition-fast:   0.2s ease;
  --transition-normal: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --transition-slow:   0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);

  /* ── Component tokens — Editorial Warmth polish ── */
  --font-size-card-title:   1.3rem;
  --color-link:             #6B5114;  /* darker brass — WCAG AA on ivory/beige */
  --color-text-secondary:   var(--color-text-light);
  --color-brass-tint:       rgba(196, 154, 60, 0.10);
  --color-brass-tint-soft:  rgba(196, 154, 60, 0.06);
  --shadow-card:            0 4px 20px rgba(44, 31, 16, 0.08);
  --shadow-card-hover:      0 8px 32px rgba(44, 31, 16, 0.13);
  --spacing-section-dense:  6rem;
}