/* ==========================================================
   Site theme - one font (Nunito), one size scale, one set of
   text colours and one page width shared by every page.
   Pages use these variables instead of hard-coded values.
   ========================================================== */

:root {
  /* Page width - matches the header (.site-header-inner) so every
     section lines up with the logo and the menu */
  --page-max: 1320px;
  --page-gutter: 24px;

  --title-font: "Nunito", sans-serif;
  --body-font: "Nunito", sans-serif;

  --fs-display: 44px;   /* hero / page title */
  --fs-section: 28px;   /* section headings */
  --fs-lg: 22px;        /* card headings, stat numbers */
  --fs-heading: 18px;   /* small headings, lead text */
  --fs-base: 16px;      /* body, product titles, prices */
  --fs-sm: 14px;        /* secondary text, buttons */
  --fs-xs: 12px;        /* labels, meta (smallest size used) */

  /* Text colours - use these instead of hard-coded hex values */
  --text-heading: #0f172a;   /* headings, titles, prices */
  --text-body: #475569;      /* paragraphs, descriptions */
  --text-muted: #64748b;     /* meta, labels, old prices */
  --text-brand: #294edb;     /* links, accents (DigiHub blue) */
  --text-success: #16a34a;
  --text-danger: #dc2626;

  /* Theme variables used throughout style.css */
  --title-color: var(--text-heading);
  --body-color: var(--text-body);
}

@media (max-width: 768px) {
  :root {
    --page-gutter: 16px;
    --fs-display: 32px;
    --fs-section: 24px;
    --fs-lg: 20px;
    --fs-heading: 16px;
  }
}

@media (max-width: 480px) {
  :root {
    --fs-display: 30px;
  }
}

body {
  font-family: var(--body-font);
  font-size: var(--fs-base);
  color: var(--text-body);
}

input,
select,
textarea,
button {
  font-family: inherit;
}

/* Bootstrap/theme containers share the header's width and gutter */
.container {
  max-width: var(--page-max);
  padding-left: var(--page-gutter);
  padding-right: var(--page-gutter);
}