/* Site-wide typography: Barlow for body text, Barlow Condensed for headings.
   Linked from every layout right after the Google Fonts link. */
:root {
    --bs-body-font-family: "Barlow", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --cn-heading-font: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", "Segoe UI", sans-serif;
}
body, button, input, select, textarea { font-family: var(--bs-body-font-family); }
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
    font-family: var(--cn-heading-font);
    letter-spacing: .005em;
}

/* ── Brand name colours ──────────────────────────────────────────────
   "Infinity2X" uses the logo colours; each product name uses its own colour.
   Markup: <span class="i2x">Infinity<span class="x2">2X</span></span> <span class="i2x-crm">CRM</span>
   On dark backgrounds wrap the heading (or section) in .i2x-dark for the light variants. */
.i2x { color: #294489; }                 /* logo navy */
.i2x .x2 { color: inherit; }             /* one word, one colour */
.i2x-glassone { color: #335eea; }
.i2x-crm { color: #e8691f; }
.i2x-cmms { color: #7357f0; }
.i2x-one { color: #0f8a68; }
.i2x-glazier { color: #0891b2; }
.i2x-dark .i2x { color: #ffffff; }
.i2x-dark .i2x .x2 { color: inherit; }
.i2x-dark .i2x-glassone { color: #93c5fd; }
.i2x-dark .i2x-crm { color: #ff8a3d; }
.i2x-dark .i2x-cmms { color: #a78bfa; }
.i2x-dark .i2x-one { color: #6ee7b7; }
.i2x-dark .i2x-glazier { color: #22d3ee; }