/* Warmlofts / SuperFoil4Roofs — colour tokens. Values sampled from the live-site screenshot. */
:root{
  /* Brand */
  --navy-900:#0d2340;
  --navy-800:#112c4b;
  --navy-700:#15304f;
  --navy-600:#1e3d61;
  --orange-600:#e8590d;
  --orange-700:#cf4c05;
  --orange-500:#f26a1f;
  --orange-100:#ffd9c7;
  --orange-50:#ffefe8;

  /* Neutrals */
  --white:#ffffff;
  --gray-50:#f8fafb;
  --gray-100:#f4f6f8;
  --gray-200:#e6eaef;
  --gray-300:#d3dae2;
  --gray-500:#8b98a8;
  --gray-600:#69788a;
  --gray-700:#4a5a70;
  --gray-900:#1a2534;

  /* EPC scale (energy-rating graphic) */
  --epc-a:#2e8b3d;
  --epc-b:#6aab55;
  --epc-c:#9fca4f;
  --epc-d:#f4cb43;
  --epc-e:#f8a13c;
  --epc-f:#f05a28;
  --epc-g:#cf1a24;

  /* Semantic aliases */
  --text-heading:var(--navy-900);
  --text-body:var(--gray-700);
  --text-muted:var(--gray-600);
  --text-meta:var(--navy-800);
  --text-on-dark:var(--white);
  --text-on-dark-muted:#a9b7c9;
  --text-accent:var(--orange-600);
  --text-link:var(--orange-600);
  --text-link-hover:var(--orange-700);

  --surface-page:var(--white);
  --surface-muted:var(--gray-100);
  --surface-card:var(--white);
  --surface-dark:var(--navy-900);
  --surface-dark-alt:var(--navy-700);
  --surface-accent:var(--orange-600);
  --surface-accent-tint:var(--orange-50);

  --border-default:var(--gray-200);
  --border-strong:var(--gray-300);
  --border-on-dark:rgba(255,255,255,.22);

  --action-primary-bg:var(--orange-600);
  --action-primary-bg-hover:var(--orange-700);
  --action-primary-fg:var(--white);
  --action-dark-bg:var(--navy-900);
  --action-dark-bg-hover:var(--navy-700);
  --focus-ring:var(--orange-600);
}