/* ==========================================================================
   Brisbane Best Movers — Material 3 Expressive preview
   Deep blue / slate colour layer
   --------------------------------------------------------------------------
   Loaded after m3.css, m3-expressive-enhancements.css and
   m3-interactions-perf.css. This sheet changes colour only: no layout,
   spacing, radius, type, illustration or markup.

   Direction:
   - deep slate-blue primary family replaces the teal seed
   - warm paper neutrals are kept, with slate-grey ink instead of green-grey
   - restrained warm copper is the complementary accent (tags, notices, focus)
   - the legacy accent names (--mint, --peach, --sand, --lilac, --butter) are
     retained for compatibility but retinted to muted blue / warm tones
   - footer, scrims, shadows and the one hard-coded form chevron are retinted
   ========================================================================== */

:root {
  /* ---------- Primary: deep slate blue ---------------------------------- */
  --primary: #234e78;
  --on-primary: #ffffff;
  --primary-container: #d7e6f6;
  --on-primary-container: #0b2944;

  /* ---------- Secondary: quiet slate ------------------------------------ */
  --secondary: #506074;
  --secondary-container: #dde5ef;
  --on-secondary-container: #131c26;

  /* ---------- Tertiary: muted copper ------------------------------------ */
  --tertiary: #8b4a2e;
  --tertiary-container: #f4e2d4;
  --on-tertiary-container: #351a0c;

  --error: #ba1a1a;
  --error-container: #ffdad6;

  /* ---------- Warm neutral paper surfaces ------------------------------- */
  --surface: #fbf9f4;
  --surface-dim: #dbd7cd;
  --surface-lowest: #ffffff;
  --surface-low: #f5f2ea;
  --surface-container: #efebe1;
  --surface-high: #e9e4d9;
  --surface-container-high: #e6e1d6;
  --surface-highest: #e2ddd1;
  --on-surface: #1a1c1f;
  --on-surface-variant: #4c545e;
  --outline: #6f7885;
  --outline-variant: #c9cdd4;
  --inverse-surface: #232a33;
  --inverse-on-surface: #f2f0e9;

  /* ---------- Accent containers (names kept, tones muted) --------------- */
  --mint: #dce8f5;
  --mint-ink: #12314e;
  --peach: #f7e4d6;
  --peach-ink: #3b2012;
  --sand: #f1e6d2;
  --sand-ink: #342714;
  --lilac: #e7e7f3;
  --lilac-ink: #232742;
  --butter: #f7e9c5;
  --butter-ink: #3a2d07;

  /* ---------- Blue-tinted elevation ------------------------------------- */
  --shadow-1: 0 1px 2px rgba(18, 32, 50, .08), 0 2px 8px rgba(18, 32, 50, .04);
  --shadow-2: 0 10px 30px rgba(18, 32, 50, .10), 0 2px 6px rgba(18, 32, 50, .06);
  --shadow-3: 0 24px 60px rgba(18, 32, 50, .16), 0 4px 12px rgba(18, 32, 50, .07);

  --xp-elev-1: 0 1px 1px rgba(18, 32, 50, .05), 0 8px 20px -12px rgba(18, 32, 50, .18);
  --xp-elev-2: 0 2px 4px rgba(18, 32, 50, .06), 0 20px 44px -20px rgba(18, 32, 50, .24);
  --xp-elev-3: 0 4px 10px rgba(18, 32, 50, .07), 0 34px 70px -28px rgba(18, 32, 50, .30);
  --xp-dot-light: rgba(190, 214, 240, .10);

  /* ---------- Surfaces that were literals in the base sheets ------------ */
  --footer-surface: #16283b;
  --footer-on-surface: #e8eef5;
  --footer-on-surface-variant: #bac9d9;
  --footer-outline: #a9bacb;
  --footer-focus: #d7e6f6;
  --field-placeholder: #666d76;
  --field-border: #828a95;
}

/* Keep the high-contrast token overrides authoritative after this sheet. */
@media (prefers-contrast: more) {
  :root {
    --outline: #2f3742;
    --outline-variant: #7a8290;
    --on-surface-variant: #2c333c;
    --field-placeholder: #3f4750;
    --field-border: #4b535e;
  }
}

/* ---------- Footer: deep navy replaces the green panel ------------------ */
.site-footer {
  background: var(--footer-surface);
  color: var(--footer-on-surface);
}
.site-footer__intro h2 { color: #f4f8fd; }
.site-footer__intro p { color: var(--footer-on-surface-variant); }
.site-footer__cols a,
.site-footer__cols span { color: var(--footer-on-surface-variant); }
.site-footer__cols a:hover { color: #ffffff; }
.site-footer__note { color: var(--footer-outline) !important; }
.site-footer__wordmark { color: rgba(190, 214, 240, .11); }
.site-footer__bottom {
  border-top-color: rgba(190, 214, 240, .22);
  color: var(--footer-outline);
}
.site-footer :focus-visible { outline-color: var(--footer-focus); }

/* The skip link paints an inverse (dark) surface, where the copper ring is
   only 2.15:1; use the pale primary container there instead. */
.skip-link:focus,
.skip-link:focus-visible { outline-color: var(--primary-container); }

/* ---------- Literal shadows, scrims and tap feedback -------------------- */
.app-bar.is-scrolled { box-shadow: 0 8px 24px rgba(18, 32, 50, .07); }
.checklist-toolbar { box-shadow: 0 8px 22px rgba(18, 32, 50, .08); }
.nav-scrim { background: rgba(14, 24, 38, .52); }
.nav-sheet { box-shadow: -20px 0 60px rgba(10, 20, 34, .28); }
.preview-strip__dot { box-shadow: 0 0 0 3px rgba(139, 74, 46, .14); }

/* The interaction layer sets a green tap highlight; retint it to primary. */
a[href],
button,
summary,
[role="button"],
input[type="checkbox"],
input[type="radio"] {
  -webkit-tap-highlight-color: rgba(35, 78, 120, .16);
}

.brand__mark {
  box-shadow:
    0 8px 18px -12px rgba(18, 40, 66, .55),
    inset 0 1px 0 rgba(255, 255, 255, .22);
}
.bottom-nav {
  box-shadow: 0 -2px 18px rgba(18, 32, 50, .12), var(--shadow-2);
}
.bottom-nav__quote-icon {
  box-shadow: 0 6px 16px -5px rgba(35, 78, 120, .50);
}

/* ---------- Disabled actions -------------------------------------------- */
/* The interaction layer fades disabled buttons to .55 opacity, which turns
   the deep blue into an ambiguous greige against the warm card. Paint a
   deliberate low-emphasis blue-grey instead, with readable slate text. */
.btn:disabled,
.btn[aria-disabled="true"] {
  --btn-bg: #e3e7ed;
  --btn-fg: #4c545e;
  opacity: 1;
  box-shadow: none;
  transform: none;
}
.btn:disabled:hover,
.btn[aria-disabled="true"]:hover,
.btn:disabled:active,
.btn[aria-disabled="true"]:active {
  background: var(--btn-bg);
  box-shadow: none;
  transform: none;
}

/* ---------- Form controls ----------------------------------------------- */
/* Borders clear 3:1 against the warm paper fill at rest (--field-border),
   strengthen on hover (--outline) and step up to primary on focus. */
.field input,
.field select,
.field textarea { border-color: var(--field-border); }

.field input::placeholder,
.field textarea::placeholder { color: var(--field-placeholder); }

.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236f7885' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

/* ---------- Forced colours ---------------------------------------------- */
/* Tonal bands rely on background colour, which forced-colours removes.
   Give each one a visible system border so the regions stay distinct. */
@media (forced-colors: active) {
  .cta-band,
  .pricing-banner,
  .still-question,
  .area-band,
  .quote-card,
  .home-quote-card,
  .start-card,
  .card,
  .truck-card,
  .aside-card,
  .guide-phase,
  .editorial-plate,
  .table-wrap,
  .preview-callout,
  .form-status,
  .legal-note,
  .hero__panel {
    border: 1px solid CanvasText;
  }
  .btn { border-color: ButtonText; }
  .preview-strip { border-bottom: 1px solid CanvasText; }
  .brand__mark,
  .step__num,
  .faq-icon,
  .bottom-nav__quote-icon { border: 1px solid CanvasText; }
  .site-footer { border-top: 1px solid CanvasText; }
}