:root {
  /* Pet-friendly color palette */
  --primary-color: #7a3213;    /* Forest green - calming and natural */
  --primary-hover: #32b3e1;    /* Darker green for hover states */
  --dark-color: #05294d;       /* Deep blue-gray - professional */
  --light-dark-color: #447ca1; /* Medium blue-gray */
  --accent-color: #e69a6b;     /* Warm peach/tan - friendly accent */
  --light-color: #ffffff;      /* White */
  --grey-color: #e5e5e5;       /* Light grey */
  --light-grey-color: #f8f9fa; /* Very light grey */
  --light-primary-color: #e8f0eb; /* Light green for backgrounds */
  --danger-color: #c0392b;     /* Deep red for errors */
  --danger-hover: #a33025;     /* Darker red for hover */
  --success-color: #508068;    /* Same as primary */
  --warning-color: #f39c12;    /* Amber/gold for warnings */
  --secondary-color: #9b6a6c;  /* Muted rose - complementary */

  /* Font families */
  --body-font: "Poppins", sans-serif;
  --heading-font: "Quicksand", sans-serif;
  --secondary-font: "Roboto", sans-serif;

  /* Font sizes - responsive */
  --fs-small: clamp(0.75rem, 2vw, 0.875rem);
  --fs-base: clamp(0.875rem, 2vw, 1rem);
  --fs-md: clamp(1rem, 2vw, 1.125rem);
  --fs-lg: clamp(1.125rem, 2.5vw, 1.375rem);
  --fs-xl: clamp(1.25rem, 3vw, 1.5rem);
  --fs-2xl: clamp(1.5rem, 4vw, 2rem);
  --fs-3xl: clamp(1.75rem, 5vw, 2.5rem);

  /* Spacing */
  --space-xs: clamp(0.25rem, 1vw, 0.5rem);
  --space-sm: clamp(0.5rem, 1vw, 0.75rem);
  --space-md: clamp(0.75rem, 1.5vw, 1rem);
  --space-lg: clamp(1rem, 2vw, 1.5rem);
  --space-xl: clamp(1.5rem, 3vw, 2rem);

  /* Header heights */
  --header-height: 160px;
  --header-height-min: 80px;
}

/* Bootstrap variable overrides */
body {
  --bs-link-color: var(--primary-color);
  --bs-link-hover-color: var(--primary-hover);
  --bs-link-color-rgb: 74, 124, 89;
  --bs-link-hover-color-rgb: 58, 99, 72;
  --bs-light-rgb: 248, 249, 250;
  --bs-font-sans-serif: var(--body-font);
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-body-font-size: 1rem;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.8;
  --bs-body-color: #333;
  --bs-primary: var(--primary-color);
  --bs-primary-rgb: 74, 124, 89;
  --bs-primary-bg-subtle: var(--light-primary-color);
  --bs-border-color: #f7f7f7;
  --bs-secondary-rgb: 139, 76, 85;
  --bs-success-rgb: 74, 124, 89;
  --bs-danger-rgb: 168, 62, 81;
  --bs-warning-rgb: 217, 180, 74;
}

/* On mobile devices below 600px */
@media screen and (max-width: 600px) {
  :root {
    --header-height: 100px;
    --header-height-min: 80px;
  }
}