@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Lora:ital,wght@0,400;0,500;0,600;1,400&display=swap");

:root {
  /* Colors */
  --bg-primary: #f7f5f0;
  --bg-secondary: #f7f5f0;
  --bg-card: #faf9f6;

  --text-primary: #333333;
  --text-secondary: #5c5a59;
  --text-inverse: #f7f5f0;

  --accent-primary: #c05a22;
  --accent-hover: #e59850;
  --accent-light: #faf2ee;

  --border-color: #e5e0d8;

  /* Typography */
  --font-serif: "Lora", Georgia, serif;
  --font-sans: "Inter", system-ui, -apple-system, sans-serif;

  --line-height-base: 1.7;
  --line-height-heading: 1.25;

  /* Spacing System */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 6rem;

  /* Borders & Shadows */
  --radius-sm: 4px;
  --radius-md: 4px;
  --radius-lg: 4px;
  --shadow-sm: 0 10px 25px rgba(0, 0, 0, 0.02);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.03);

  /* Transitions */
  --transition-fast: 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  --transition-normal: 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  --clay-highlight: #e59850;
  --cta-color: #c05a22;
  --cta-hover: #e59850;
}