/*
  Shared Merwing web theme.
  This stylesheet is loaded after page-local styles to align static pages with
  the pay portal visual language while preserving each page's existing layout.
*/
:root {
  color-scheme: dark;
  --merwing-bg-a: #0f172a;
  --merwing-bg-b: #1f1b2e;
  --merwing-bg-c: #251933;
  --merwing-primary: #5b6dfa;
  --merwing-secondary: #7f4ab5;
  --merwing-teal: #38d5c2;
  --merwing-ink: #f8fafc;
  --merwing-muted: rgba(226, 232, 240, 0.76);
  --merwing-panel: rgba(255, 255, 255, 0.94);
  --merwing-panel-soft: rgba(255, 255, 255, 0.86);
  --merwing-panel-border: rgba(255, 255, 255, 0.28);
  --merwing-dark-text: #111827;
  --merwing-dark-muted: #64748b;
  --merwing-shadow: 0 20px 70px rgba(15, 23, 42, 0.25);
}

html {
  background: var(--merwing-bg-a);
}

body {
  background:
    radial-gradient(circle at 20% 20%, rgba(91, 109, 250, 0.45), transparent 40%),
    radial-gradient(circle at 80% 0%, rgba(127, 74, 181, 0.4), transparent 45%),
    linear-gradient(135deg, var(--merwing-bg-a), var(--merwing-bg-b) 65%, var(--merwing-bg-c)) !important;
  color: var(--merwing-ink);
}

body::before,
body::after {
  opacity: 0.18 !important;
}

header:not(.hero):not(.merwing-account-dialog-head),
nav,
.topbar,
.admin-header,
.contractor-header {
  background: rgba(15, 23, 42, 0.86) !important;
  color: var(--merwing-ink) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 12px 36px rgba(15, 23, 42, 0.22) !important;
  backdrop-filter: blur(10px);
}

header:not(.hero):not(.merwing-account-dialog-head) h1,
.topbar h1,
.admin-header h1,
.contractor-header h1,
nav a {
  color: var(--merwing-ink) !important;
}

.logo-section p,
header:not(.hero):not(.merwing-account-dialog-head) .logo-section p {
  color: rgba(226, 232, 240, 0.82) !important;
}

.hero,
.onboarding-nav {
  background-image:
    linear-gradient(120deg, rgba(15, 23, 42, 0.82), rgba(36, 28, 52, 0.66)),
    radial-gradient(circle at 20% 20%, rgba(91, 109, 250, 0.46), transparent 45%),
    radial-gradient(circle at 92% 0%, rgba(56, 213, 194, 0.28), transparent 40%) !important;
  background-color: rgba(15, 23, 42, 0.9) !important;
  color: var(--merwing-ink) !important;
}

.shell,
.wrap,
.page,
main {
  color: var(--merwing-ink);
}

.card,
.panel,
.section,
section:not(.hero),
.subcard,
.template-data-block,
.modal-card,
.modal-panel,
.qr-modal-panel,
.error-container,
.phone-demo,
.feature-card,
.trade-card,
.testimonial-card,
.faq-item,
.metric,
.auth-status,
.invoice-details,
.payment-container,
.content > section,
.content,
.hero:not(header) {
  background: var(--merwing-panel) !important;
  color: var(--merwing-dark-text) !important;
  border-color: var(--merwing-panel-border) !important;
  box-shadow: var(--merwing-shadow) !important;
}

.card h1,
.card h2,
.card h3,
.panel h1,
.panel h2,
.panel h3,
.section h1,
.section h2,
.section h3,
section:not(.hero) h1,
section:not(.hero) h2,
section:not(.hero) h3 {
  color: var(--merwing-dark-text) !important;
}

.muted,
.small,
.panel p,
.card p,
.section p,
section:not(.hero) p,
label,
.context-line,
.row-copy,
.footnote,
.note {
  color: var(--merwing-dark-muted) !important;
}

a {
  color: var(--merwing-primary);
}

button,
a.button,
.button,
.cta-button {
  border-radius: 999px !important;
}

button:not(.secondary):not(.ghost):not(.subtle-button):not(.merwing-account-close):not(.merwing-account-login):not(.merwing-account-button):not(.merwing-forgot-password),
a.button.primary,
.button.primary,
.cta-button {
  background: linear-gradient(135deg, var(--merwing-primary), var(--merwing-secondary)) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  box-shadow: 0 10px 30px rgba(91, 109, 250, 0.28) !important;
}

button.secondary,
button.ghost,
.subtle-button,
a.button.secondary,
.button.secondary {
  background: rgba(15, 23, 42, 0.05) !important;
  color: var(--merwing-dark-text) !important;
  border-color: rgba(15, 23, 42, 0.10) !important;
  box-shadow: none !important;
}

.hero .cta-button.secondary,
.hero button.secondary,
.hero-section .cta-button.secondary,
.hero-section button.secondary,
header.hero .cta-button.secondary,
header.hero button.secondary {
  background: rgba(255, 255, 255, 0.12) !important;
  color: var(--merwing-ink) !important;
  border-color: rgba(255, 255, 255, 0.7) !important;
}

.hero .cta-button.secondary:hover,
.hero button.secondary:hover,
.hero-section .cta-button.secondary:hover,
.hero-section button.secondary:hover,
header.hero .cta-button.secondary:hover,
header.hero button.secondary:hover {
  background: rgba(255, 255, 255, 0.18) !important;
}

input,
select,
textarea {
  background: #ffffff !important;
  color: var(--merwing-dark-text) !important;
  border-color: rgba(15, 23, 42, 0.12) !important;
  border-radius: 12px !important;
}

input:focus,
select:focus,
textarea:focus {
  outline: none !important;
  border-color: var(--merwing-primary) !important;
  box-shadow: 0 0 0 3px rgba(91, 109, 250, 0.16) !important;
}

table {
  background: var(--merwing-panel);
  color: var(--merwing-dark-text);
}

th,
td {
  border-color: rgba(15, 23, 42, 0.12) !important;
}

.status,
.banner,
.notice,
.context-line {
  border-color: rgba(91, 109, 250, 0.24) !important;
}

.merwing-account-dialog {
  background: #ffffff !important;
  color: var(--merwing-dark-text) !important;
}

@media (max-width: 720px) {
  header:not(.hero):not(.merwing-account-dialog-head),
  .topbar,
  .admin-header,
  .contractor-header {
    gap: 12px;
  }

  .card,
  .panel,
  .section,
  section:not(.hero) {
    border-radius: 14px !important;
  }
}