/*
 * Brand colour overrides — Visual Effect Painter & Decorator
 * Loaded AFTER tradie-site-template-f9fbc4.webflow.css so these :root
 * declarations win the cascade for every Webflow theme-colour token.
 * Webflow CSS itself stays untouched (see CLAUDE.md, decision 5).
 */

:root,
body {
  /* Visual Effect blue scale */
  --ve-blue-900: #00214A;
  --ve-blue-800: #002F6C;
  --ve-blue-700: #003F8C; /* primary */
  --ve-blue-600: #1F5BAE;
  --ve-blue-500: #2C6FBF;
  --ve-blue-300: #8FB4DE;
  --ve-blue-100: #DDE8F4;
  --ve-blue-50:  #EEF3FA;

  /* Remap Webflow theme tokens onto the blue scale.
     The Webflow export redeclares these on `body`, so the override
     must hit `body` too — :root alone loses to body via inheritance.
     theme-color-02 / 03 carry escaped suffixes from the Webflow export —
     keep the exact escape so the var() references in webflow.css resolve. */
  --all-color--theme-color-01: var(--ve-blue-700);
  --all-color--theme-color-02\<deleted\|variable-9b75c381-5df1-54b5-ddc1-50746e2348a4\>: var(--ve-blue-900);
  --all-color--theme-color-03\<deleted\|variable-99c1c90d-97c3-6974-2616-e7f766800da9\>: var(--ve-blue-600);

  /* Webflow's neutral-04 (#112c23) and neutral-03 (#47564e) are
     greenish — used as the dark surface, headings, and body text.
     Swap to dark blue + a neutral slate so the page reads blue, not
     teal/green. */
  --all-color--neutral-04: var(--ve-blue-900);
  --all-color--neutral-03: #475569;

  /* Phase 2 Astro components key brand accents off `--orange-50` with a
     hardcoded fallback — point it at the blue primary so eyebrows,
     numbered process steps, callout borders, and link arrows follow the
     new scheme. */
  --orange-50: var(--ve-blue-700);
}

/* ── Layout: page gutter ─────────────────────────────────────────────────
 * The Webflow `.container` (max-width 1280) and `.w-container` (940) ship
 * with NO horizontal padding, so on any viewport narrower than the max-width
 * the content runs hard against the screen edge — cramped on mobile, most
 * visibly in prose. Add a consistent gutter here. It's capped by the existing
 * max-width, so wide-desktop layout only gains a standard inset. Nested
 * containers (the header nests two) are reset so the padding never stacks.
 */
.container,
.w-container {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

@media screen and (min-width: 768px) {
  .container,
  .w-container {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

.container .container,
.container .w-container,
.w-container .container,
.w-container .w-container {
  padding-left: 0;
  padding-right: 0;
}