:root {
  --clr-dusty-rose: #D4A5A5;
  --clr-lavender: #B8A9C9;
  --clr-faded-denim: #7B9CB5;
  --clr-warm-amber: #E8A040;
  --clr-bright-amber: #FFB000;
  --clr-gold-glow: #FFC857;
  --clr-warm-beige: #E8DCC8;
  --clr-background: #F5EDE0;
  --clr-dark-warm: #4A3728;
  --clr-muted-text: #7B6B5A;

  --clr-bg-dark: #2A221E;
  --clr-surface-dark: #3A3028;
  --clr-text-dark: #F5EDE0;
  --clr-muted-dark: #A89888;
  --clr-rose-dark: #C48A8A;
  --clr-amber-dark: #D49030;
  --clr-gold-dark: #D4A040;

  --font-sans: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-size-h1: 2.5rem;
  --font-size-h2: 1.75rem;
  --font-size-h3: 1.25rem;
  --font-size-body-lg: 1.125rem;
  --font-size-body: 1rem;
  --font-size-body-sm: 0.875rem;
  --font-size-label: 0.75rem;

  --font-weight-bold: 700;
  --font-weight-semi: 600;
  --font-weight-regular: 400;
  --font-weight-light: 300;
  --font-weight-xbold: 800;

  --line-h1: 1.15;
  --line-h2: 1.2;
  --line-h3: 1.3;
  --line-body: 1.6;

  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-xxl: 48px;
  --space-section: 80px;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  --shadow-card: 0 2px 8px rgba(74, 55, 40, 0.08);
  --shadow-modal: 0 4px 16px rgba(74, 55, 40, 0.12);

  --transition-default: 300ms ease-in-out;
  --transition-slow: 500ms ease-in-out;

  --space-btn: 12px 24px;
  --clr-calm: var(--clr-dusty-rose);
  --clr-calm-hover: #C48A8A;
  --clr-nav-bg: rgba(245, 237, 224, 0.85);
}

[data-theme="dark"] {
  --clr-dusty-rose: var(--clr-rose-dark);
  --clr-lavender: #9A8BB0;
  --clr-faded-denim: #6A8CA5;
  --clr-warm-amber: var(--clr-amber-dark);
  --clr-bright-amber: #E0A030;
  --clr-gold-glow: var(--clr-gold-dark);
  --clr-warm-beige: var(--clr-surface-dark);
  --clr-background: var(--clr-bg-dark);
  --clr-dark-warm: var(--clr-text-dark);
  --clr-muted-text: var(--clr-muted-dark);
  --clr-calm: var(--clr-rose-dark);
  --clr-calm-hover: #B07878;
  --clr-nav-bg: rgba(42, 34, 30, 0.85);
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.2);
  --shadow-modal: 0 4px 16px rgba(0, 0, 0, 0.3);
}