/* Todd Farm Antiques & Flea Market — CSS Variables & Design System */

:root {
  /* COLOR PALETTE */
  --color-cream: #FEF8F3;
  --color-wood-brown: #8B7355;
  --color-forest-green: #704B2E;
  --color-forest-green-hover: #8A6340;
  --color-barn-red: #6B7B7F;
  --color-barn-red-hover: #7F9296;
  --color-taupe: #D4C4B8;
  --color-natural-black: #2B2B2B;
  --color-card-bg: #FFFDFB;

  /* TYPOGRAPHY */
  --font-display: 'Lora', Georgia, serif;
  --font-body: 'Merriweather', Georgia, serif;
  --font-accent: 'Caveat', 'Brush Script MT', cursive;

  /* FONT SIZES (rem) */
  --fs-h1-mobile: 2rem;
  --fs-h1-desktop: 3.2rem;
  --fs-h2-mobile: 1.5rem;
  --fs-h2-desktop: 2rem;
  --fs-h3-mobile: 1.25rem;
  --fs-h3-desktop: 1.5rem;
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-accent: 1.125rem;

  /* LINE HEIGHT */
  --lh-h1: 1.2;
  --lh-h2: 1.3;
  --lh-h3: 1.4;
  --lh-body: 1.6;
  --lh-small: 1.5;
  --lh-accent: 1.4;

  /* SPACING */
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 1.5rem;
  --spacing-lg: 2rem;
  --spacing-xl: 3rem;
  --spacing-2xl: 4rem;
  --spacing-3xl: 5rem;

  /* LAYOUT */
  --max-width: 1200px;
  --padding-mobile: 1.5rem;
  --padding-tablet: 2rem;
  --padding-desktop: 2.5rem;

  /* BORDER & SHADOWS */
  --border-radius: 4px;
  --border-color: var(--color-taupe);
  --shadow-sm: 0 2px 8px rgba(43, 43, 43, 0.08);
  --shadow-md: 0 4px 12px rgba(43, 43, 43, 0.12);
  --shadow-hover: 0 2px 8px rgba(43, 43, 43, 0.15);
  --shadow-lg: 0 4px 16px rgba(43, 43, 43, 0.15);

  /* TRANSITIONS */
  --transition-fast: all 0.2s ease;
  --transition-standard: all 0.3s ease;

  /* BREAKPOINTS (for reference) */
  /* Mobile: 320–479px (default) */
  /* Tablet Small: 480–767px */
  /* Tablet Large: 768–1023px */
  /* Desktop: 1024px+ */
}