:root {
  /* Colors */
  --color-cream: #ebe6e1;
  --color-text: #434343;
  --color-text-secondary: #666666;
  --color-dark: #2c2c2a;
  --color-dark-hover: #434343;
  --color-beige: #ddd7cf;
  --color-gold: #d4a017;
  --color-coral: #e0765b;
  --color-footer-bg: #252525;
  --color-footer-text: #b8b8b8;
  --color-border-light: rgba(51, 51, 51, 0.15);
  --color-border-cream: rgba(255, 254, 242, 0.5);

  /* Typography */
  --font-serif: 'Libre Baskerville', Georgia, serif;
  --font-sans: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-micro: 'Lexend Exa', 'Inter', sans-serif;

  --text-xs: 0.6875rem;   /* 11px */
  --text-sm: 0.8125rem;   /* 13px */
  --text-base: 1rem;      /* 16px */
  --text-md: 1.125rem;    /* 18px */
  --text-lg: 1.25rem;     /* 20px */
  --text-xl: 1.5rem;      /* 24px */
  --text-2xl: 1.75rem;    /* 28px */
  --text-3xl: 2.25rem;    /* 36px */

  /* Spacing */
  --sp-xs: 0.5rem;
  --sp-sm: 1rem;
  --sp-md: 1.5rem;
  --sp-lg: 2.5rem;
  --sp-xl: 4rem;
  --sp-2xl: 6rem;
  --sp-3xl: 8rem;

  /* Layout */
  --announcement-height: 36px;
  --header-height: 57px;
  --container-max: 1440px;
  --container-pad: 2.5rem;

  /* Radius */
  --radius: 6px;

  /* Transitions */
  --transition: 0.3s ease;
}