/**
 * Justice42 Power Pages - portalbasictheme.css replacement
 * ----------------------------------------------------------------------------
 * Upload over the generated Portal Studio `portalbasictheme.css` web file.
 *
 * This intentionally keeps the `--portalThemeColor*` and
 * `[data-component-theme="portalThemeColor*"]` contract that Power Pages emits,
 * but maps it to the Justice42 Fluent UI 2 Web Light palette. It removes the
 * generated pink/burgundy/Arial theme layer so `jdi-fluent-light.css` can be the
 * canonical visual system.
 *
 * If the Design Studio "Styling" panel regenerates portalbasictheme.css, upload
 * this file again.
 */

:root {
  --portalThemeColor1: var(--jdi-color-neutral-background-1, #ffffff);
  --portalThemeColor2: var(--jdi-color-neutral-foreground-1, #242424);
  --portalThemeColor3: var(--jdi-color-neutral-background-2, #fafafa);
  --portalThemeColor4: var(--jdi-color-neutral-foreground-1, #242424);
  --portalThemeColor5: var(--jdi-color-neutral-background-3, #f5f5f5);
  --portalThemeColor6: var(--jdi-color-neutral-foreground-3, #616161);
  --portalThemeColor7: var(--jdi-color-brand-150, #eff6fc);
  --portalThemeColor8: #000000;
  --portalThemeColor9: var(--jdi-color-neutral-foreground-1, #242424);
  --portalThemeColor10: var(--jdi-color-brand-70, #0078d4);
  --portalThemeColor11: var(--jdi-color-neutral-background-4, #f0f0f0);
  --portalThemeColor12: var(--jdi-color-brand-140, #deecf9);

  --portalThemeOnColor1: var(--jdi-color-text, #242424);
  --portalThemeOnColor2: #ffffff;
  --portalThemeOnColor3: var(--jdi-color-text, #242424);
  --portalThemeOnColor4: #ffffff;
  --portalThemeOnColor5: var(--jdi-color-text, #242424);
  --portalThemeOnColor6: #ffffff;
  --portalThemeOnColor7: var(--jdi-color-brand-30, #003e6e);
  --portalThemeOnColor8: #ffffff;
  --portalThemeOnColor9: #ffffff;
  --portalThemeOnColor10: #ffffff;
  --portalThemeOnColor11: var(--jdi-color-text, #242424);
  --portalThemeOnColor12: var(--jdi-color-brand-30, #003e6e);
}

[data-component-theme="portalThemeColor1"]  { background-color: var(--portalThemeColor1);  color: var(--portalThemeOnColor1); }
[data-component-theme="portalThemeColor2"]  { background-color: var(--portalThemeColor2);  color: var(--portalThemeOnColor2); }
[data-component-theme="portalThemeColor3"]  { background-color: var(--portalThemeColor3);  color: var(--portalThemeOnColor3); }
[data-component-theme="portalThemeColor4"]  { background-color: var(--portalThemeColor4);  color: var(--portalThemeOnColor4); }
[data-component-theme="portalThemeColor5"]  { background-color: var(--portalThemeColor5);  color: var(--portalThemeOnColor5); }
[data-component-theme="portalThemeColor6"]  { background-color: var(--portalThemeColor6);  color: var(--portalThemeOnColor6); }
[data-component-theme="portalThemeColor7"]  { background-color: var(--portalThemeColor7);  color: var(--portalThemeOnColor7); }
[data-component-theme="portalThemeColor8"]  { background-color: var(--portalThemeColor8);  color: var(--portalThemeOnColor8); }
[data-component-theme="portalThemeColor9"]  { background-color: var(--portalThemeColor9);  color: var(--portalThemeOnColor9); }
[data-component-theme="portalThemeColor10"] { background-color: var(--portalThemeColor10); color: var(--portalThemeOnColor10); }
[data-component-theme="portalThemeColor11"] { background-color: var(--portalThemeColor11); color: var(--portalThemeOnColor11); }
[data-component-theme="portalThemeColor12"] { background-color: var(--portalThemeColor12); color: var(--portalThemeOnColor12); }

[data-component-theme] h1,
[data-component-theme] h2,
[data-component-theme] h3,
[data-component-theme] h4,
[data-component-theme] h5,
[data-component-theme] h6,
[data-component-theme] p,
[data-component-theme] p.smallText,
[data-component-theme] span,
[data-component-theme] li {
  color: inherit;
}