/* HouseMakeover — Brand Tokens v1
   Single source of truth for the website build. Import this everywhere. */
:root{
  /* Colour */
  --navy:#2C3345;        /* primary brand — headings, dark UI */
  --midnight:#171C26;    /* deepest dark — footers, hero */
  --lagoon:#30BAD0;      /* signature teal accent (matches logo) */
  --deep-teal:#10788A;   /* depth, hovers, teal text on light */
  --coral:#FF6240;       /* CTA only — primary buttons */
  --sand:#F3EBE1;        /* warm light section background */
  --cloud:#F5F8FA;       /* cool light section background */
  --mist:#8893A8;        /* muted text, borders */
  --steel:#608DA9;       /* slate-blue — from the logo wordmark */
  --ink:#12161D;         /* body text */
  --white:#FFFFFF;
  --grad-teal:linear-gradient(120deg,#30BAD0,#10788A);   /* energy: accents, AFTER, glows */
  --grad-navy:linear-gradient(150deg,#222a3a 0%,#1b4e5e 60%,#10788a 120%);   /* Theme A: navy-grounded → teal jewel */
  --emerald:#0e9a6a;
  --teal-wash:radial-gradient(circle at 88% 12%,rgba(48,186,208,.14),transparent 55%); /* faint warm tint on light */
  --teal-hairline:linear-gradient(120deg,#30BAD0,#10788A); /* 4px top edge on white cards */

  /* Type — locked: Montserrat echoes the logo wordmark; Inter for body */
  --font-display:'Montserrat',system-ui,sans-serif;
  --font-body:'Inter',system-ui,-apple-system,sans-serif;

  /* Scale / shape */
  --radius:18px;
  --radius-pill:99px;
  --maxw:1180px;
  --shadow-cta:0 10px 24px -10px rgba(255,98,64,.7);
}