/* ============================================
   FARR CONSTRUCTIONS — Brand Variables
   Override framework defaults here.
   Brand spec: monochromatic — black on warm off-white. Poppins everywhere.
   ============================================ */

:root {
  /* Brand colors */
  --color-primary:    rgba(0, 0, 0, 1);      /* black — used for dividers, button bg, text emphasis */
  --color-primary-70: rgba(0, 0, 0, 0.7);
  --color-primary-50: rgba(0, 0, 0, 0.5);
  --color-primary-30: rgba(0, 0, 0, 0.3);

  --color-dark:       rgba(0, 0, 0, 1);       /* body text */
  --color-light:      rgba(245, 244, 242, 1); /* #F5F4F2 — main + footer bg */
  --color-divider:    rgba(0, 0, 0, 1);       /* divider lines */

  /* Card border (used in services cards) */
  --color-border:     rgba(0, 0, 0, 1);

  /* Accent — used for numbered service markers on the Home Renovations page */
  --color-accent:     #4A8FA5;

  /* Fonts — Poppins across all three tiers */
  --h--font-family:  'Poppins', sans-serif;   /* headings (h1-h6, heading-* classes) */
  --sh--font-family: 'Poppins', sans-serif;   /* sub-headings (sub-heading-* classes) */
  --p--font-family:  'Poppins', sans-serif;   /* paragraphs (body, paragraph-* classes) */
}

/* Body background — framework's body declaration uses var(--color-light) by default,
   but enforce it here to be explicit. */
body {
  background-color: var(--color-light);
  color: var(--color-dark);
}