/* MyProAssistant public design system.
   Single source of truth for public colors, surfaces, glow and header. */

:root,
html[data-public-theme="dark"] {
  --public-radius-sm: 10px;
  --public-radius-md: 14px;
  --public-radius-lg: 20px;

  --public-bg: #070b12;
  --public-bg-soft: #0b111b;
  --public-panel: #0f1724;
  --public-panel-strong: #121d2b;
  --public-inner: #0b1420;
  --public-text: #f7f9fc;
  --public-text-soft: #cbd5e1;
  --public-muted: #93a3b6;
  --public-faint: #627286;
  --public-border: rgba(148,163,184,.15);
  --public-border-strong: rgba(56,189,248,.28);
  --public-accent: #38bdf8;
  --public-accent-strong: #0ea5e9;
  --public-accent-soft: rgba(56,189,248,.085);
  --public-gold: #f4c356;
  --public-gold-soft: rgba(244,195,86,.12);
  --public-success: #34d399;
  --public-footer: #05080d;

  --public-shadow-soft: 0 14px 38px rgba(0,0,0,.14);
  --public-shadow-lift: 0 22px 58px rgba(0,0,0,.22);

  --public-page-background:
    radial-gradient(900px 520px at 13% -8%, rgba(37,99,235,.20), transparent 72%),
    radial-gradient(720px 420px at 82% 2%, rgba(244,195,86,.16), transparent 72%),
    radial-gradient(620px 380px at 7% 44%, rgba(244,195,86,.085), transparent 75%),
    radial-gradient(700px 420px at 94% 78%, rgba(244,195,86,.06), transparent 76%),
    linear-gradient(118deg, transparent 0 56%, rgba(244,195,86,.035) 72%, transparent 89%),
    var(--public-bg);

  --public-header: rgba(7,11,18,.94);
  --public-header-background:
    linear-gradient(90deg,rgba(244,195,86,.105),rgba(7,11,18,.95) 23%,rgba(7,11,18,.95) 77%,rgba(56,189,248,.055));
  --public-header-border: rgba(244,195,86,.28);
  --public-header-shadow: 0 10px 34px rgba(0,0,0,.20), inset 0 -1px 0 rgba(244,195,86,.12);

}

html[data-public-theme="light"] {
  --public-bg: #e7eaee;
  --public-bg-soft: #dde2e7;
  --public-panel: #f1f3f6;
  --public-panel-strong: #f5f6f8;
  --public-inner: #e9edf1;
  --public-text: #132033;
  --public-text-soft: #263b50;
  --public-muted: #405469;
  --public-faint: #607184;
  --public-border: rgba(51,65,85,.18);
  --public-border-strong: rgba(2,119,181,.34);
  --public-accent: #0277b5;
  --public-accent-strong: #075985;
  --public-accent-soft: rgba(2,119,181,.10);
  --public-gold: #9a6811;
  --public-gold-soft: rgba(154,104,17,.10);
  --public-success: #166534;
  --public-footer: #dde2e7;

  --public-shadow-soft: 0 12px 34px rgba(30,64,95,.09);
  --public-shadow-lift: 0 18px 48px rgba(30,64,95,.13);

  /* Same MPA waves in day mode; dark-blue paths over soft pearl-blue. */
  --public-page-background:
    radial-gradient(ellipse 72% 39% at 2% 0%,rgba(14,165,233,.13),transparent 76%),
    radial-gradient(ellipse 68% 40% at 96% 36%,rgba(37,99,235,.09),transparent 78%),
    url("/mpa-brand-waves.svg"),
    linear-gradient(170deg,#f1f7fd 0%,#e5eff8 53%,#ecf4fb 100%);

  --public-header: rgba(241,243,246,.96);
  --public-header-background: var(--public-header);
  --public-header-border: var(--public-border);
  --public-header-shadow: 0 8px 30px rgba(0,0,0,.045);

}


/* MPA corporate blue-wave design — approved for public site. 
   Keeps the official MPA cyan/royal blue plus subtle gold accents and actual logo. */
:root:not([data-public-theme="light"]),
html[data-public-theme="dark"] {
  --public-bg: #050b18;
  --public-bg-soft: #0a182b;
  --public-panel: rgba(12,27,48,.92);
  --public-panel-strong: rgba(13,32,58,.95);
  --public-inner: rgba(8,23,44,.90);
  --public-border: rgba(93,162,224,.22);
  --public-border-strong: rgba(56,189,248,.40);
  --public-shadow-soft: 0 16px 48px rgba(0,6,21,.25);
  --public-shadow-lift: 0 28px 72px rgba(0,6,21,.40);
  --public-page-background:
    radial-gradient(ellipse 70% 35% at 1% 0%,rgba(37,99,235,.26),transparent 77%),
    radial-gradient(ellipse 68% 42% at 98% 32%,rgba(9,78,155,.23),transparent 82%),
    url("/mpa-brand-waves.svg"),
    linear-gradient(165deg,#07182d 0%,#030915 51%,#091a30 100%);
  --public-header-background: linear-gradient(96deg,rgba(7,20,41,.97),rgba(5,13,29,.89) 58%,rgba(9,33,58,.94));
  --public-header-border: rgba(56,189,248,.25);
  --public-header-shadow: 0 12px 46px rgba(0,3,13,.24),inset 0 -1px 0 rgba(244,195,86,.12);
}

/* All public pages share one restrained light-wave system.
   Workspace dashboards deliberately keep their existing backgrounds. */
html:not([data-public-theme="light"]) body {
  background-color: #050b18;
}
html:not([data-public-theme="light"]) :is(
  .mpa-site,.mpa-features,.mpa-pricing,.mpa-support-public,
  .mpa-auth-page,.demo-page,.mpa-tools-page,.automation-page,
  .wishlist-page,.formation-page,.mpa-public-formation
) {
  background: var(--public-page-background) !important;
  background-size: auto,auto,100% 1180px,auto !important;
  background-position: center top,center top,center top,center top !important;
  background-repeat: no-repeat,no-repeat,repeat-y,no-repeat !important;
  color: var(--public-text);
}
html:not([data-public-theme="light"]) :is(
  .mpa-site,.mpa-features,.mpa-pricing,.mpa-support-public
) :is(.mpa-hero-section,.features-hero,.pricing-hero,.support-hero) {
  background-color: transparent !important;
}
html:not([data-public-theme="light"]) :is(
  .mpa-site,.mpa-features,.mpa-pricing,.mpa-support-public
) :is(.features-catalog-section,.support-faq-section) {
  background: rgba(5,14,28,.74) !important;
}
html:not([data-public-theme="light"]) :is(.mpa-site,.mpa-features,.mpa-pricing,.mpa-support-public) :is(
  .mpa-orbit-stage,.pricing-plan-card,.features-flow-card,.support-final-cta
) {
  border-color: rgba(56,189,248,.28) !important;
  box-shadow: 0 22px 62px rgba(0,4,18,.26);
}
html:not([data-public-theme="light"]) .mpa-unified-header {
  backdrop-filter: blur(22px);
}
@media (max-width: 700px) {
  html:not([data-public-theme="light"]) :is(
    .mpa-site,.mpa-features,.mpa-pricing,.mpa-support-public,
    .mpa-auth-page,.demo-page,.mpa-tools-page,.automation-page,.wishlist-page,.formation-page,.mpa-public-formation
  ) {
    background-size: auto,auto,185% 960px,auto !important;
    background-position: center top,center top,center top,center top !important;
  }
}

/* Restrained gold foil glints, without turning the overall palette yellow. */
html:not([data-public-theme="light"]) :is(
  .mpa-site .mpa-orbit-stage,
  .mpa-pricing .pricing-plan-card,
  .mpa-features .features-flow-card,
  .mpa-support-public .support-final-cta
) {
  box-shadow: inset 0 1px 0 rgba(244,195,86,.17), 0 22px 62px rgba(0,4,18,.26);
}
html:not([data-public-theme="light"]) .mpa-unified-header::after {
  background: linear-gradient(90deg,transparent,rgba(244,195,86,.40) 25%,rgba(56,189,248,.40) 58%,transparent 95%);
}

/* The wave motif belongs to BOTH public themes, not just the dark one.
   Use the same single file for all public routes without affecting workspaces. */
html[data-public-theme="light"] body { background-color:#e5eff8; }
html[data-public-theme="light"] body :is(
  .mpa-site,.mpa-features,.mpa-pricing,.mpa-support-public,
  .formation-page,.mpa-public-formation,.mpa-auth-page,.demo-page,.mpa-tools-page,
  .automation-page,.wishlist-page,.mpa-legal,.mpa-cookie,
  .mpa-terms,.mpa-data-deletion,.mpa-news-public
) {
  background:var(--public-page-background)!important;
  background-size:auto,auto,100% 1180px,auto!important;
  background-position:center top,center top,center top,center top!important;
  background-repeat:no-repeat,no-repeat,repeat-y,no-repeat!important;
  color:var(--public-text);
}
@media(max-width:700px) {
  html[data-public-theme="light"] body :is(
    .mpa-site,.mpa-features,.mpa-pricing,.mpa-support-public,
    .formation-page,.mpa-public-formation,.mpa-auth-page,.demo-page,.mpa-tools-page,
    .automation-page,.wishlist-page,.mpa-legal,.mpa-cookie,
    .mpa-terms,.mpa-data-deletion,.mpa-news-public
  ) { background-size:auto,auto,185% 960px,auto!important; }
}

/* 2026-10-12: clean ink / azure light theme, no gold text on pearl surfaces. */
html[data-public-theme="light"]{
  --public-gold:#111827;
  --public-gold-soft:rgba(17,24,39,.06);
  --public-header-background:var(--mpa-chrome-solid,#e5f0fa);
  --public-header:var(--mpa-chrome-solid,#e5f0fa);
  --public-footer:var(--mpa-chrome-solid,#e5f0fa);
}
/* Same original SVG rendered ONCE across each static tool page, no repeating seam. */
html[data-public-theme="light"] body .automation-page,
html[data-public-theme="dark"] body .automation-page{
  background:var(--public-page-background)!important;
  background-position:center top!important;
  background-size:auto,auto,100% 100%,auto!important;
  background-repeat:no-repeat!important;
}
html[data-public-theme="light"] .automation-page main > .automation-section,
html[data-public-theme="light"] .automation-page main > section.automation-section,
html[data-public-theme="dark"] .automation-page main > .automation-section,
html[data-public-theme="dark"] .automation-page main > section.automation-section{
  background:transparent!important;
}

/* Uniform solid chrome on all routes, including standalone SEO tools. */
:root:not([data-public-theme="light"]),html[data-public-theme="dark"]{
  --mpa-chrome-solid:#07182a;
  --public-header-background:var(--mpa-chrome-solid);
}
html[data-public-theme="light"]{
  --mpa-chrome-solid:#e5f0fa;
  --public-header-background:var(--mpa-chrome-solid);
}