@use '../color-defaults' as *;
@use '../color-vars' as *;

// Light theme tokens come from .c8y-light-theme foundation class on the element.
// This allows branding overrides (appended later in the cascade) to take precedence.

// Override unprefixed vars to match the light theme values.
// Without this, branded/dark parent elements' unprefixed vars (e.g. --text-color: white)
// are inherited and win in the dual-prefix fallback: var(--text-color, var(--c8y-text-color)).
c8y-dashboard-gridstack:not([name]):not([use-context])>.dashboard-theme-white,
body .dashboard-preview-slot.panel-content-white,
.dashboard-preview-slot.dashboard-theme-white,
c8y-context-dashboard.c8y-grid-dashboard.dashboard-theme-white,
.c8y-grid-dashboard c8y-dashboard-child .panel-content-white {
  --text-color: var(--c8y-text-color);
  --text-muted: var(--c8y-text-muted);
  --body-background-color: var(--c8y-body-background-color);
  --link-color: var(--c8y-link-color);
  --link-hover-color: var(--c8y-link-hover-color);
  color: $text-color;
}

.dashboard-preview-slot.dashboard-theme-white {
  background: white !important;
}

.dashboard-preview-slot.dashboard-theme-light {
  --c8y-dashboard-background: var(--body-background-color, var(--c8y-body-background-color));
  background:var(--c8y-dashboard-background);

}

c8y-dashboard-gridstack:not([name]):not([use-context])>.dashboard-theme-white,
c8y-context-dashboard.c8y-grid-dashboard.dashboard-theme-white {
  --c8y-dashboard-background: var(--c8y-palette-high);
  background-color: var(--c8y-dashboard-background);
}

c8y-dashboard-gridstack:not([name]):not([use-context])>.dashboard-theme-light,
c8y-context-dashboard.c8y-grid-dashboard.dashboard-theme-light {
  --c8y-dashboard-background: var(--body-background-color, var(--c8y-body-background-color)) ;

  .c8y-dark-theme & {
    --c8y-dashboard-background: var(--c8y-palette-low);
  }
  .c8y-system-theme &{
    @media(prefers-color-scheme: dark) {
      --c8y-dashboard-background: var(--c8y-palette-low);
    }
  }


}