/* FIMBY Experience Cloud (LWR) — DXP token overrides
   Maps Salesforce DXP design tokens to FIMBY's central --fimby-* tokens.
   Branding-set classes (.dxpBrand_*) load AFTER head-markup CSS,
   so !important is required on tokens the branding set overrides.
   No separate dark-mode block needed — the --fimby-* values switch
   automatically via fimby-tokens.css.
*/


/* ── Base defaults (lowest priority) ──────────────────────────── */
:root {
  --dxp-g-brand: var(--fimby-brand-teal);
  --dxp-g-root:  var(--fimby-surface-page);
  --dxp-s-form-element-color-background: var(--fimby-surface-input);
  --dxp-g-root-contrast:   var(--fimby-text-strong);
  --dxp-g-root-contrast-1: var(--fimby-text-strong);
  --dxp-g-root-contrast-2: var(--fimby-text-primary);
  --dxp-g-root-contrast-3: var(--fimby-text-secondary);
  --dxp-g-neutral-3:       var(--fimby-text-muted);
  --dxp-s-form-element-color-border: var(--fimby-input-border-default);
  --dxp-g-neutral:   var(--fimby-border-default);
  --dxp-g-neutral-2: var(--fimby-border-strong);
  --dxp-s-link-text-color-1: var(--fimby-brand-teal);
  --dxp-g-success:   var(--fimby-success);
  --dxp-g-warning-1: var(--fimby-warning);
  --dxp-g-warning-2: var(--fimby-warning);
  --dxp-g-warning-3: var(--fimby-text-secondary);
  --dxp-g-error:     var(--fimby-error);
  --dxp-g-info:      var(--fimby-info);
  --dxp-s-button-color-contrast-1: var(--fimby-text-on-teal);
}


/* ── Branding-set override ────────────────────────────────────────
   The site theme applies a .dxpBrand_* class to sections that
   resets --dxp-g-root to white and other tokens to defaults.
   !important is needed because those styles load after this file.
   ────────────────────────────────────────────────────────────────── */
[class*="dxpBrand_"] {
  --dxp-g-root: var(--fimby-surface-page) !important;
  --dxp-g-brand: var(--fimby-brand-teal) !important;
  --dxp-s-form-element-color-background: var(--fimby-surface-input) !important;
  --dxp-g-root-contrast:   var(--fimby-text-strong) !important;
  --dxp-g-root-contrast-1: var(--fimby-text-strong) !important;
  --dxp-g-root-contrast-2: var(--fimby-text-primary) !important;
  --dxp-g-root-contrast-3: var(--fimby-text-secondary) !important;
  --dxp-g-neutral-3:       var(--fimby-text-muted) !important;
  --dxp-s-form-element-color-border: var(--fimby-input-border-default) !important;
  --dxp-g-neutral:   var(--fimby-border-default) !important;
  --dxp-g-neutral-2: var(--fimby-border-strong) !important;
  --dxp-s-link-text-color-1: var(--fimby-brand-teal) !important;
  --dxp-g-success:   var(--fimby-success) !important;
  --dxp-g-warning-1: var(--fimby-warning) !important;
  --dxp-g-warning-2: var(--fimby-warning) !important;
  --dxp-g-warning-3: var(--fimby-text-secondary) !important;
  --dxp-g-error:     var(--fimby-error) !important;
  --dxp-g-info:      var(--fimby-info) !important;
  --dxp-s-button-color-contrast-1: var(--fimby-text-on-teal) !important;
}


/* ── Login form card ──────────────────────────────────────────────
   The form inherits --dxp-g-root (page color) from its branding-set
   section. Override it to the lighter card surface so the form
   stands out against the warm-grey page canvas.
   ────────────────────────────────────────────────────────────────── */
community_login-login-form {
  --dxp-g-root: var(--fimby-surface-card) !important;
  --dxp-s-form-element-color-background: var(--fimby-surface-input) !important;
}