/* Design System Variables */
:root {
  /* Primary Colors */
  --deep-slate: #3E4A52;
  --warm-charcoal: #2A2A2A;
  --warm-off-white: #F9F7F4;
  --accent-brick: #A0522D;

  /* Supporting Colors */
  --medium-gray: #5A6268;
  --light-border: #E5E1DA;
  --badge-bg: #EBE8E3;
  --white: #FFFFFF;

  /* Typography */
  --font-serif: 'EB Garamond', Georgia, serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Font Sizes - Fluid Typography */
  --text-hero: clamp(2.5rem, 5vw, 4rem);
  --text-section: clamp(2rem, 4vw, 3rem);
  --text-subsection: clamp(1.25rem, 2.5vw, 1.75rem);
  --text-body: clamp(1rem, 1.5vw, 1.25rem);
  --text-small: clamp(0.875rem, 1vw, 1rem);
  --text-button: 1rem;

  /* Spacing */
  --section-padding: clamp(40px, 6vw, 60px);
  --content-max-width: 1400px;
  --card-gap: clamp(24px, 4vw, 48px);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-normal: 250ms ease;
}