:root {
  /* Brand structure */
  --color-brand-primary: #20242a;
  --color-brand-deep: #15181c;
  --color-brand-soft: #343a42;

  /* Brand accents */
  --color-accent: #c83a22;
  --color-accent-hover: #a92f1b;
  --color-accent-active: #8f2817;
  --color-highlight: #e3a008;

  /* Backgrounds and surfaces */
  --color-bg-page: #f8f6ef;
  --color-bg-subtle: #f7f8fa;
  --color-bg-card: #ffffff;
  --color-bg-dark: #20242a;
  --color-bg-dark-deep: #15181c;
  --color-bg-dark-soft: #343a42;
  --color-bg-accent-subtle: #fbeae5;
  --color-bg-highlight-subtle: #fff4cf;
  --color-bg-success-subtle: #e8f5ef;
  --color-bg-warning-subtle: #fff1d6;
  --color-bg-error-subtle: #fce8e6;

  /* Text */
  --color-text-primary: #20242a;
  --color-text-secondary: #59616b;
  --color-text-on-dark: #ffffff;
  --color-text-muted-on-dark: #c4cbd2;
  --color-text-accent: #c83a22;

  /* Boundaries */
  --color-border: #d9dee3;
  --color-border-strong: #b7c0c9;
  --color-border-on-dark: rgba(255, 255, 255, 0.18);
  --color-border-on-dark-strong: rgba(255, 255, 255, 0.34);

  /* Interaction */
  --color-link: #c83a22;
  --color-link-hover: #a92f1b;
  --color-focus-ring: #c83a22;
  --color-selection-bg: #e3a008;
  --color-selection-text: #20242a;
  --color-control-disabled-bg: #e6e9ec;
  --color-control-disabled-text: #69727c;
  --color-control-disabled-border: #c8ced4;

  /* Semantic states */
  --color-success: #18794e;
  --color-warning: #a15c00;
  --color-error: #b42318;
  --color-info: #4c5968;

  /* Recognisable third-party action */
  --color-whatsapp: #128c4a;
  --color-whatsapp-hover: #0e713b;
  --color-whatsapp-active: #0a5a2f;

  /* Elevation */
  --shadow-subtle: 0 1px 2px rgba(21, 24, 28, 0.06), 0 8px 24px rgba(21, 24, 28, 0.08);
  --shadow-floating: 0 12px 36px rgba(21, 24, 28, 0.16);
  --shadow-overlay: 0 24px 64px rgba(21, 24, 28, 0.28);
}

::selection {
  background: var(--color-selection-bg);
  color: var(--color-selection-text);
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 3px;
}

:where(input, textarea)::placeholder {
  color: #69727c;
  opacity: 1;
}

:where(button, input, select, textarea):disabled,
:where([aria-disabled='true']) {
  cursor: not-allowed;
}

:where(button, input, select, textarea):disabled {
  border-color: var(--color-control-disabled-border);
  background: var(--color-control-disabled-bg);
  color: var(--color-control-disabled-text);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

@media (forced-colors: active) {
  :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid Highlight;
  }

  :where(button, [role='button'], a) {
    forced-color-adjust: auto;
  }
}

/* Shared component colour contracts */
html { background: var(--color-bg-page); }
body { background: var(--color-bg-page); color: var(--color-text-primary); }

:where(.button, .login-button, .scheme-button, .catalogue-cta, .primary) { border-color: var(--color-accent); background: var(--color-accent); color: var(--color-text-on-dark); }
:where(.button, .login-button, .scheme-button, .catalogue-cta, .primary):hover { border-color: var(--color-accent-hover); background: var(--color-accent-hover); color: var(--color-text-on-dark); }
:where(.button, .login-button, .scheme-button, .catalogue-cta, .primary):active { border-color: var(--color-accent-active); background: var(--color-accent-active); }

:where(.button.light, .secondary) { border: 1px solid var(--color-border-strong); background: transparent; color: var(--color-text-primary); }
:where(.button.light, .secondary):hover { border-color: var(--color-brand-primary); background: var(--color-bg-subtle); color: var(--color-text-primary); }

:where(.legal-content, .contact, .catalogue-hub, .heater-actions, .solar, .principles) a:not([class]),
:where(.contact-link, .map-link, .official-library-link, .official-water-link) { color: var(--color-link); text-decoration-color: currentColor; text-underline-offset: .2em; }
:where(.legal-content, .contact, .catalogue-hub, .heater-actions, .solar, .principles) a:not([class]):hover,
:where(.contact-link, .map-link, .official-library-link, .official-water-link):hover { color: var(--color-link-hover); }
:where(.legal-content, .contact, .catalogue-hub) a:visited { color: var(--color-accent-active); }

:where(input, select, textarea) { border-color: var(--color-border); background: var(--color-bg-card); color: var(--color-text-primary); }
:where(input, select, textarea):hover { border-color: var(--color-border-strong); }
:where(input, select, textarea):focus { border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(200, 58, 34, .18); }

:where(.category, .solution, .catalogue-card, .catalogue-tile, .brand-resource-card, .legal-card) { border-color: var(--color-border); box-shadow: var(--shadow-subtle); }
:where(.category, .solution, .catalogue-card, .catalogue-tile, .legal-card) { background: var(--color-bg-card); color: var(--color-text-primary); }
:where(.category, .solution, .catalogue-card, .catalogue-tile) p { color: var(--color-text-secondary); }

:where(.tile-catalogue-link, .brand-page-link) { color: var(--color-link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25em; }
:where(.tile-catalogue-link, .brand-page-link):hover { color: var(--color-link-hover); }

[aria-disabled='true'] { border: 1px dashed var(--color-border-strong); color: var(--color-control-disabled-text); pointer-events: none; }

.skip-link { background: var(--color-bg-card); color: var(--color-text-primary); border: 2px solid var(--color-accent); }
/* Accent-surface action inversion */
:where(.cta, .network, .promise, .features, .water-heaters, .catalogue-cta) :where(.button, .catalogue-cta, .scheme-button) {
  border-color: var(--color-bg-card);
  background: var(--color-bg-card);
  color: var(--color-text-primary);
}
:where(.cta, .network, .promise, .features, .water-heaters, .catalogue-cta) :where(.button, .catalogue-cta, .scheme-button):hover {
  border-color: var(--color-brand-deep);
  background: var(--color-brand-deep);
  color: var(--color-text-on-dark);
}

.sa-whatsapp-cta {
  border-color: var(--color-whatsapp);
  background: var(--color-whatsapp-hover);
  color: var(--color-text-on-dark);
}
.sa-whatsapp-cta:hover { border-color: var(--color-whatsapp-active); background: var(--color-whatsapp-active); }

:where(.automation-card, .sa-footer, .sa-mega, .sa-drawer__panel) :where(p, small) {
  color: var(--color-text-muted-on-dark);
}
/* Small labels and graphics on graphite need stronger contrast than coral provides. */
:where(.range, .why, .automation-card, .sa-mega, .sa-drawer__panel, .sa-footer) :where(.eyebrow, .category-icon, .section-no) {
  color: var(--color-highlight);
}

:where(.range, .grid, .range-grid) article > span {
  color: var(--color-highlight);
}
/* Light catalogue and resource cards embedded in dark range sections. */
.range .brand-resource-card {
  background: var(--color-bg-card);
  color: var(--color-text-primary);
}

.range .brand-resource-card:hover,
.range .brand-resource-card:focus-visible {
  background: var(--color-bg-subtle);
  color: var(--color-text-primary);
}