:root {
  /* ============ BRAND — forest green + terracotta ============ */
  --color-primary: #2C5F4F;
  --color-primary-dark: #1E4538;
  --color-primary-darker: #163329;
  --color-primary-soft: #E5EFEA;
  --color-primary-soft-2: #F0F6F3;
  --color-primary-ring: rgba(44, 95, 79, 0.25);
  
  /* Warm accent — used for highlights, small flourishes */
  --color-accent: #C17A3C;
  --color-accent-soft: #FBF1E5;
  --color-accent-dark: #A1612D;
  
  /* ============ BACKGROUNDS — warm paper ============ */
  --color-background: #F7F5EF;
  --color-surface: #FFFFFF;
  --color-surface-soft: #F4F2EC;
  --color-surface-warm: #FDFCF9;
  
  /* ============ TEXT — warm charcoal ============ */
  --color-text: #1F1D18;
  --color-text-secondary: #5A564E;
  --color-text-muted: #8C887E;
  
  /* ============ BORDERS ============ */
  --color-border: #E8E5DC;
  --color-border-strong: #D6D2C5;
  
  /* ============ STATUS ============ */
  --color-success: #2E8B57;
  --color-success-soft: #E6F4EC;
  --color-danger: #C5483D;
  --color-danger-soft: #FBEDEC;
  
  /* ============ TYPOGRAPHY ============ */
  --font-ui: "DM Sans", system-ui, -apple-system, sans-serif;
  --font-reading: "Source Serif 4", Georgia, serif;
  
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.375rem;
  --font-size-2xl: 1.75rem;
  --font-size-3xl: clamp(2rem, 4.2vw, 2.7rem);
  
  /* ============ SPACING ============ */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  
  /* ============ RADIUS ============ */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-full: 999px;
  
  /* ============ SHADOWS — warm-tinted depth ============ */
  --shadow-xs: 0 1px 2px rgba(40, 35, 25, 0.04);
  --shadow-sm:
    0 1px 3px rgba(40, 35, 25, 0.05),
    0 1px 2px rgba(40, 35, 25, 0.03);
  --shadow-md:
    0 4px 16px rgba(40, 35, 25, 0.06),
    0 2px 4px rgba(40, 35, 25, 0.03);
  --shadow-lg:
    0 14px 36px rgba(40, 35, 25, 0.08),
    0 4px 10px rgba(40, 35, 25, 0.04);
  --shadow-focus: 0 0 0 3px var(--color-primary-ring);
  
  /* ============ LAYOUT ============ */
  --sidebar-width: 264px;
  --topbar-height: 64px;
  
  /* ============ MOTION ============ */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 240ms cubic-bezier(0.4, 0, 0.2, 1);
}